css-shapes

问题 I would like to make a button like these one just with CSS without using another element. Button Image Since the button has a border attached, I think I normally need both, the :before and :after elements to create just one arrow at one side. So to make one arrow at each side I would need another span element inside the link. The second method I tried is the one you see below. But with this solution they are not properly centered and each side of the arrow is different in length. Has someone

问题 Is there way to create inset border radius with css3? (Without images) I need a border radius like this: 回答1: The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution: div.round { background: -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz

问题 I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this: Does someone have an idea perhaps how it could be achieved? .curved { margin: 0 auto; width: 800px; height: 500px; background: lightblue; } <div class=\"container\"> <div class=\"curved\"></div> </div> 回答1: Simply use border-radius and make the element overflowing. You can also rely on pseudo-element to avoid extra markup: .container { margin: 0 auto; width: 500px; height:

问题 If I use a pixel or em value for border-radius, the edge radius is always a circular arc or a pill shape even if the value is greater than the largest side of the element. When I use percentages , the edge radius is elliptic and starts at the middle of each side of the element resulting in an oval or ellipse shape : Pixel value for border-radius : div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color:

问题 I\'m trying to recreate this image with CSS: I would not need it to repeat. This is what I started but it just has a straight line: #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id=\"wave\"></div> 回答1: I'm not sure it's your shape but it's close - you can play with the values: https://jsfiddle.net/7fjSc/9/ #wave { position: relative; height: 70px; width: 600px; background: #e0efe3; } #wave:before { content: ""; display: block; position: absolute; border

问题 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

问题 I\'m looking to \"cut\" the top left corner of a div, like if you had folded the corner of a page down. I\'d like to do it in pure CSS, are there any methods? 回答1: If the parent element has a solid color background, you can use pseudo-elements to create the effect: div { height: 300px; background: red; position: relative; } div:before { content: ''; position: absolute; top: 0; right: 0; border-top: 80px solid white; border-left: 80px solid red; width: 0; } http://jsfiddle.net/2bZAW/ P.S. The

问题 I am trying to create a shape like in the image below with a slanted edge on only one side (for example, the bottom side) while the other edges remain straight. I tried using the border method (code is given below) but the dimensions of my shape are dynamic and hence I cannot use this method. .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: \'\'; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px

问题 Is it possible to cut out a hollow circle using only CSS ? This we can all do: But can we do this? The circle must be hollow and transparent . Thus the problem is not solved by putting a solid color circle over a div . 回答1: You can achieve a transparent cut out circle with 2 different techniques : 1.SVG The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made

问题 Is it possible to control the length and distance between dashed border strokes in CSS? This example below displays differently between browsers: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Big differences: IE 11 / Firefox / Chrome Are there any methods that can provide greater control of the dashed borders appearance? 回答1: Css render is browser specific and I don't know any fine tuning on it, you should work with images as