css-shapes

问题 Here is an image of the design which I am trying to achieve with only CSS. How do I achieve such border for the container div so that I can place transparent logo and text in between the gaps. This design will go on a video background. The black background is just for illustration purpose. So far I have tried to achieve something like this as a test: body { background: black; } p { color: #ffffff; font-size: 16px; text-align: center; padding: 30px; } .steps-frame-1 { margin-top: 60px; width:

问题 I\'d like to achieve a custom-colored shape like this using no Javascript: Currently I\'m overlaying an image of the \'frame\' over an orange rectangular div, but this is pretty hacky. I suppose I could use a dynamically generated canvas element, but that not only requires JS, but HTML5 canvas support. Any ideas? 回答1: My best attempt: http://dabblet.com/gist/4592062 Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :) .triangle {

问题 How do I create a menu which looks like this... Link to PSD I don\'t want to use the PSD images. I would prefer using icons from some package like FontAwesome and have the backgrounds/css generated in CSS. A version of the menu that is using the PSD to to generate images of the tooltip and then using it can be found here. 回答1: Almost 3 years later, I finally made the time to revisit this and post an improved version. You can still view the original answer at the end for reference. While SVG

问题 This is the CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } How does it produce the circle below? Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this: After applying border-radius 30 pixels it would appear like this: The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases. So, how does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180

问题 This is my CSS. CSS #hexagon-circle { width: 100px; height: 55px; background: red; position: relative; border-radius: 10px;} #hexagon-circle:before { content: \"\"; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 29px solid red; border-radius: 10px;} #hexagon-circle:after { content: \"\"; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent;

问题 I need to create an underline effect with a bottom border that is smaller than the h2 title\'s width. Usually I don\'t upload images but I figure it might help explaining the question a bit further: 回答1: You could use a pseudo-element for this. (example) .pseudo_border { position:relative; display:inline-block; } .pseudo_border:after { content:''; position:absolute; left:0; right:0; top:100%; margin:10px auto; width:50%; height:6px; background:#00f; } Just absolutely position a pseudo-element

问题 I have a jsfiddle here - http://jsfiddle.net/apbuc773/ I\'d like to create a star using svg. I\'d like to stroke the outside of the star. In my example the stroke is on every line which dissects the inner shape. Also is it possible to half fill the star shape. I\'d like to use this for a star rating but I need half and maybe quarter fills. <svg height=\"210\" width=\"500\"> <polygon points=\"100,10 40,198 190,78 10,78 160,198\" style=\"fill:red;stroke:blue;\"/> </svg> 回答1: You can

问题 I know it\'s possible to create a hexagon shape using the following code: .hex:before { content: \" \"; width: 0; height: 0; border-bottom: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; position: absolute; top: -30px; } .hex { margin-top: 30px; width: 104px; height: 60px; background-color: #6C6; position: relative; } .hex:after { content: \"\"; width: 0; position: absolute; bottom: -30px; border-top: 30px solid #6C6; border-left: 52px solid

问题 I know you can make a circle in CSS3 using the border radius hack. But is there any way to make them have segments like this picture? Is there a way of doing this through HTML and CSS but not JS? 回答1: Yes, you can get such slices of custom angles using either one of the following two methods: If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheel I did last month. If you need the slices to be elements

问题 I want to create a shape, which i would describe as \"inverse circle\": The image is somehow inaccurate, because the black line should continue along the outer border of the div element. Here is a demo of what i have at the moment: http://jsfiddle.net/n9fTF/ Is that even possible with CSS without images? 回答1: Update: CSS3 Radial Background Gradient Option (For those browsers supporting it--tested in FF and Chrome--IE10, Safari should work too). One "problem" with my original answer is those