css-shapes

问题 I need this image in CSS and inside this border a background image needed. I have tried border-radius:0 0 50% 50%; -webkit-border-radius:0 0 50% 50%; But not getting the required shape. Any help would be appreciated. 回答1: With Border Radius: You can give the element a different border-radius value in the X and Y axis to obtain a curved bottom side with border and a background image. .curved-border { height: 200px; width: 400px; background: url(http://lorempixel.com/400/200/nature/1); border:

问题 This question already has answers here : Transparent half circle cut out of a div (8 answers) Closed 6 years ago . Does anyone have an idea how to apply a background (in css) as you can see on the picture attached ? Thanks 回答1: div { background:lightgreen; width:100%; height:200px; position:relative; text-align:center; padding:100px 0 0 0; box-sizing:border-box; } div:before { content:''; position:absolute; background:white; width:100%; height:100px; top:0; left:0; border-radius:40%;

问题 This question already has answers here : Transparent half circle cut out of a div (8 answers) Closed 6 years ago . Does anyone have an idea how to apply a background (in css) as you can see on the picture attached ? Thanks 回答1: div { background:lightgreen; width:100%; height:200px; position:relative; text-align:center; padding:100px 0 0 0; box-sizing:border-box; } div:before { content:''; position:absolute; background:white; width:100%; height:100px; top:0; left:0; border-radius:40%;

问题 This question already has answers here : How can I show only corner borders? (17 answers) Closed 1 year ago . I have a player that I use on my website. I want to change the appearance of the play button. I was thinking to do this with a dashed border and then increase the space between the dashes. That didn't work. I can't use an image. Is there a CSS(3) solution? I want it to look something like this. It's really all about the corners! ------------- UPDATE ---------------- So I used the

问题 This question already has answers here : How can I show only corner borders? (17 answers) Closed 1 year ago . I have a player that I use on my website. I want to change the appearance of the play button. I was thinking to do this with a dashed border and then increase the space between the dashes. That didn't work. I can't use an image. Is there a CSS(3) solution? I want it to look something like this. It's really all about the corners! ------------- UPDATE ---------------- So I used the

问题 I have this and I want to make a cube with HTML & CSS only like in the above image. My best try: .mainDiv{ position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top:100px; } .square{ width:100px; height:100px; background:#c52329; border:solid 2px #FFF; float:left; transform: skew(180deg,210deg); position: absolute; top: 43px; } .square2{ width:100px; height:100px; background:#c52329; border:solid 2px #FFF; float:left; transform: skew(180deg,150deg); position: absolute;

问题 Although I've found similar questions, none explicitly match my goal. I'm trying to display text with a gradient colour, with low opacity (so you can see the background through it), but also with a (matching) solid gradient border (i.e. text-stroke). I've discovered that answers to similar questions develop a workaround by creating a ::before underlay state that replicates a (gradient) border effect, but changing the opacity on the text's natural state just displays the colour of the ::before

问题 Although I've found similar questions, none explicitly match my goal. I'm trying to display text with a gradient colour, with low opacity (so you can see the background through it), but also with a (matching) solid gradient border (i.e. text-stroke). I've discovered that answers to similar questions develop a workaround by creating a ::before underlay state that replicates a (gradient) border effect, but changing the opacity on the text's natural state just displays the colour of the ::before

问题 I have a bit of a problem with creating a block with beveled edges, in addition I need a border to be beveled and slightly off the main block. The problem is that this block can be Reponsive according to the screen. I do not know the exact way to do it, hope everyone helps. This is what I do now .box { display: flex; padding: 20px; height: 200px; width: 300px; color: #ffffff; background: red; position: relative; } .box .edge { width: 18px; height: 10px; background: #ffffff; position: absolute

问题 I have a bit of a problem with creating a block with beveled edges, in addition I need a border to be beveled and slightly off the main block. The problem is that this block can be Reponsive according to the screen. I do not know the exact way to do it, hope everyone helps. This is what I do now .box { display: flex; padding: 20px; height: 200px; width: 300px; color: #ffffff; background: red; position: relative; } .box .edge { width: 18px; height: 10px; background: #ffffff; position: absolute