css-shapes

问题 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 am trying to make a circle like this. I was able to make it in the fiddle, but the problem is that I need each orange side to be a link and I can't do it with borders. If anyone can help me with this I will be really grateful. #circle { width: 200px; height: 200px; border-radius: 50%; background: green; } #incircle { width: 100px; height: 100px; border-radius: 50%; border: 50px dotted orange; } <div id="circle"> <div id="incircle"></div> </div> 回答1: The key to creating a circle with

问题 How can I draw this Belle icon shape in CSS only? I've tried the border-radius on a square element but not getting the exact corners. 回答1: Well, in order to achieve the exact effect, we cannot rely on a single element even if we use percentage on border-radius . So one option could be using two (pseudo-)elements overlapping each other where one of them is rotated by 90deg : div { width: 300px; height: 300px; /* Just for demo */ width: 95vmin; height: 95vmin; position: relative; } div:after,

问题 How can I draw this Belle icon shape in CSS only? I've tried the border-radius on a square element but not getting the exact corners. 回答1: Well, in order to achieve the exact effect, we cannot rely on a single element even if we use percentage on border-radius . So one option could be using two (pseudo-)elements overlapping each other where one of them is rotated by 90deg : div { width: 300px; height: 300px; /* Just for demo */ width: 95vmin; height: 95vmin; position: relative; } div:after,

问题 This question already has answers here : Slanted Corner on CSS box (6 answers) Closed 5 years ago . How could I style a div to like the below image? 回答1: You can use half triangle with the pseudo element. .container { padding: 20px; background-color: #F8F8F8; max-width: 200px; } .rectangle { width: 200px; height: 100px; background-color: #003781; position: relative; } .rectangle:after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border

问题 How to make this shape use only css What I have tried: .button-up { border-top: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom: 35px solid transparent; width: 200px; } <div class="button-up"></div> 回答1: I would go with some linear/radial-gradient like this: .box { width:200px; height:200px; border-radius:50%; background: linear-gradient(-30deg, white 50%,transparent 50.5%),

问题 I would like design £1 similar to the following image using CSS. I would like to have some text with gradient colour, gradient border and text-shadow in this design. I tried the following code, but it doesn't work. CSS: .pound-lbl { background-image: linear-gradient(275deg, #f8e71c 0%, #f8bd1c 100%); -webkit-background-clip: text; color: #FFDE17; text-shadow: 0 2px 4px rgba(0,0,0,0.50); background: -webkit-linear-gradient(275deg,#F8CC1C 0%, #FFFFFF 100%); -webkit-background-clip: text;

问题 I want to do this shape using CSS not as an image can I but I get the green shape and I can't get the all background transparent ! #arrowbox:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 128, 0, 0); border-right-color: #008000; border-width: 25px; margin-top: -25px; } 回答1: You can do it with some perspective and rotation: .box { margin:20px; padding:20px calc(50% - 100px); /* this

来源： https://stackoverflow.com/questions/19736655/pointed-angled-arrow-style-borders-in-css

来源： https://stackoverflow.com/questions/56804355/creating-a-css-blinking-eyelid-effect