css-shapes

问题 I've tried the perspective solution here How to transform each side of a shape separately? but can't get it to work probably due to the irregularness of the shape. Only the top and right side columns are slanted, vertical and bottom are straight. How can I do this with CSS? 回答1: Using CSS borders you can create triangles and trapezoids. You can achieve your shape joining a triangle and a trapezoid. .triangle { border: 0 solid red; border-left-width: 500px; border-top-width: 30px; border-top

问题 I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me with this image and turnning into a css equivalent thanks! TRIED <span class="xyz"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="0,0 100,0 100,40 0,40 20,20" style="fill:#46b"/> </svg> text </span> Not sure how to add that to my current css ALSO TRIED display: block; clear: both; width: 70%; height

问题 I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me with this image and turnning into a css equivalent thanks! TRIED <span class="xyz"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="0,0 100,0 100,40 0,40 20,20" style="fill:#46b"/> </svg> text </span> Not sure how to add that to my current css ALSO TRIED display: block; clear: both; width: 70%; height

问题 Is there a way to make the following: #id { border-radius: 100px; width: 100px; height: 100px; } <div id="circle"> <h3>Hello</h3> </div> A round div with the text centered vertically and horizontally . At the same time keeping the circle responsive. By that I mean having a width of say 50% of the containing div , at the same time keeping the height percentage equal as to make a circle. And changing the static 100px to pertentages makes the circle oval. 回答1: Viewport Units If you use the same

问题 This question already has answers here : How can I make a div with irregular shapes with css3 and html5? (4 answers) Closed 2 years ago . I'd like to style a div in the shape of an irregular hexagon with all right angles (think the shape of Utah, but not necessarily that orientation). I've seen some questions on StackExchange regarding irregular shapes for buttons (people say to use an image), and using irregular shapes for triangles (people say to use clipping), but nothing so far on having

问题 I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond. I am having issues organising the diamonds themselves and the href seems to fail. How do I position the responsive diamonds in a regular grid ? Her is my code: body { background: black; color: #000000; font: 13px georgia, serif; line-height: 1.4; font-weight: lighter; text-rendering: optimizelegibility; } #diamond { width: 0; height: 0; border

问题 I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond. I am having issues organising the diamonds themselves and the href seems to fail. How do I position the responsive diamonds in a regular grid ? Her is my code: body { background: black; color: #000000; font: 13px georgia, serif; line-height: 1.4; font-weight: lighter; text-rendering: optimizelegibility; } #diamond { width: 0; height: 0; border

问题 I need to recreate the following design using only CSS : What you're seeing in the picture is the top of a website container - the "links" are part of the main menu. As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image. For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple

问题 I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right. Is there an easy way to design this in CSS ? Image is show below: 回答1: Maybe this could be an elegant solution. If you use background then you can specify really nicely where what goes and it improves readability a bit. input[type="text"] { padding: 10px; background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);

问题 I have the following code for my menu: HTML: <div class="container wrapper"> <nav> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">page1</a></li> <li><a href="#">page2</a></li> </ul> </nav> And the CSS: .wrapper{ padding:20px; background:#d3d3d3; height:200px; } .menu{ background:#7F7979; } .menu li{ padding-top: 20px; padding-bottom: 20px; padding-left: 15px; display: inline-block; } .menu li a{ color:white; } nav ul{ list-style:none; margin:0 padding:0; } What I want to