css-shapes

问题 I'm trying to figure out how to implement progressbar around rectangle. Let's image that I have div 500x300 with 5px (black) border. I would like that progress bar started in left top corner then goes to -> right corner -> bottom - right corner -> left bottom corner -> and back on start point. 回答1: Pure CSS: This effect can be achieved with CSS using multiple linear gradients as background and positioning them appropriately. The approach is as follows: Create 4 thin linear-gradient

问题 Does anyone know how to draw concentric circles like the RAF symbol (concentric red, white and blue circles) using only CSS? 回答1: You can make 3 concentric circles with : one element border-radius:50%; to make the shape round padding and background-clip:content-box; for the white gap between the red and blue circles border for the outer blue circle div{ width:80px; height:80px; border-radius:50%; background-color:#CE1126; background-clip:content-box; padding:40px; border:40px solid #00247D; }

问题 IS it possible, I know all the following shapes are possible in this link: http://css-tricks.com/examples/ShapesOfCSS/ but cross must be possible too. When I say cross I mean like this: 回答1: You could achieve something like this with pseudoelements only: http://jsbin.com/upiyoc/1/edit #cross { width: 100px; height: 100px; position: relative; } #cross:before, #cross:after { content: ""; position: absolute; z-index: -1; background: #d00; } #cross:before { left: 50%; width: 30%; margin-left: -15

问题 IS it possible, I know all the following shapes are possible in this link: http://css-tricks.com/examples/ShapesOfCSS/ but cross must be possible too. When I say cross I mean like this: 回答1: You could achieve something like this with pseudoelements only: http://jsbin.com/upiyoc/1/edit #cross { width: 100px; height: 100px; position: relative; } #cross:before, #cross:after { content: ""; position: absolute; z-index: -1; background: #d00; } #cross:before { left: 50%; width: 30%; margin-left: -15

问题 Need to draw angular sides of menubar as inner content may be the some labels or links. 回答1: How about using CSS3 transform skew? Demo .shape { width: 200px; height: 50px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); transform: skew(30deg); background: #000; margin: 20px; } Nothing much to explain here, it's a simple div element, which I've skewed by 30deg which will result in the shape you expected. Note: It's a CSS3 property, so older browsers, as well as IE will spoil your

问题 I have a shape with an edge like this in Photoshop: Is it possible to make the repeated triangles as a border with CSS? 回答1: You can use css3 gradients to create a zig-zag patterned background, use the after css pseudo to apply it like a border. .header{ color: white; background-color: #2B3A48; text-align: center; } .header:after { content: " "; display: block; position: relative; top: 0px; left: 0px; width: 100%; height: 36px; background: linear-gradient(#2B3A48 0%, transparent 0%), linear

问题 When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page. I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me. 回答1: You can use some CSS like this: #trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } <div id="trapezoid"></div>

问题 Like this With only this code <span>1</span> 回答1: http://jsfiddle.net/MafjT/ You can use this css span { display: block; height: 60px; width: 60px; line-height: 60px; -moz-border-radius: 30px; /* or 50% */ border-radius: 30px; /* or 50% */ background-color: black; color: white; text-align: center; font-size: 2em; } Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border

问题 This question already has answers here : Shape with a slanted side (responsive) (3 answers) Closed 3 years ago . I want to create two divs which are floated left to each other, however with a slanted angled border separating them. I've attached a picture to demonstrate what I mean. Does anyone know if something like this is possible with CSS (cutting off the content with an overflow:hidden I guess) These divs need to contain images that get cut off by the border, here is an example : 回答1: Try

问题 This question already has answers here : How to draw circle in html page? (16 answers) Closed 4 years ago . Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ? 回答1: You could use a .before with a content with a unicode symbol for a circle (25CF). .circle:before { content: ' \25CF'; font-size: 200px; } <span class="circle"></span> I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit