css-shapes

问题 The code below shows a circle plus a bar, built using a previous post. The problem I'm experiencing is that the bar in practice has a fixed height equal to the circle 's height. I guess this is because of the absolute inline-block . However, I seem to need absolute inline-block because without them text is placed below the bar instead of inside it. The problem I'm experiencing is that if the text within the text div does not fit within bar (too much text), the text runs belows the bar (so the

问题 I have a hard time with this problem: I want to do with css this: Like the picture: two trapezes with a rounded corner (important!), one trapeze with text and the other with a picture, or icon, the size of the trapeze with the icon can be thinner, but both trapezes must be the same size. I don't know if should use svg as a background or pure css. If i use svg, how can i insert text and the icon inside the trapezes with a rounded corner? Thank you in advance for your help. 回答1: Here is another

问题 I can't figure out how to create pentagon shape for user avatar image (or .svg). Looking for shape that point down not top. I have found examples here http://css-tricks.com/examples/ShapesOfCSS/ but don't know how to fill image in such shape. Background propertie also won't work, stuck here. Pentagon example 回答1: Easiest solution without any CSS, would be using svg (maximum browser support). <svg width="100" height="100" viewBox="-1 0 101 100"> <path d="M20,0 L80,0 L100,60 L50,100 L0,60z"

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . I've been researching for a while and still can't find a way to make this border on css, so far I've made only one side. I mean the same border with css not with the picture 回答1: This is posible with css3. Take a look: https://developer.mozilla.org/es/docs/Web/CSS/border-image

问题 I'm trying to create this shape in css. I have gone as far as I can and I can't create the spike on the right hand side Here is my CSS nav li a { float: left; height: 23px; line-height: 24px; position: relative; padding: 1px 10px 0 24px; color: #fff; background-color: #393233; text-align: center; width:75%; } nav li a:before { content: ""; float: left; position: absolute; top: 0; left: 0; width: 0; height: 0; border-color: white #393233 white white; border-style: solid; border-width: 12px

问题 I am a CSS newbie so don't know much abut it. How can I create a sector of say 40deg with border? I can create 90deg sectors, 180deg ones, but not any other angles. See my code : http://jsfiddle.net/gzt9abx5/1/ div.abc { height: 100px; width: 100px; background: red; border-radius: 0 100px 0 0; border: 4px solid blue; } I need the shape to be sector, not the background. It is not a duplicate of another question. 回答1: You can achieve it using overflow: hidden; and transform: rotate; . If you

问题 This question already has answers here : How do CSS triangles work? (18 answers) CSS triangle with background image [duplicate] (3 answers) Closed 5 years ago . I am trying to make the following with CSS Making a triangle with CSS is straightforward but I don't know how to give it a non-solid background. Any suggestions? edit: The background pattern is a PNG image. 回答1: .triangle { width: 160px; height: 160px; position: absolute; top: 30%; left: 45%; clip: rect(auto, 180px, auto, 100px);

问题 Hi , I need create div which would look like one on the provided image. Notice black and grey zones. I have been experimenting with css 3 but i was able to create only differently rotated trapezoid. Is it possible to create this only with css ? EDIT: What ive tried was this trapezoid { border-bottom: 100px solid red; border-left: 150px solid transparent; border-right: 0px solid transparent; height: 0; } It produces trapezoid which is nice but its differnetly rotated and i cant figure out how

问题 How to make a grid with dog bone format in CSS and/or jQuery? The format of bone is this: And the grid would look like this, just that out instead of hexagonal and the content (image/text) inside format would bone: It is possible to create this format? 回答1: Here's how you draw bone. Demo HTML <div class="bone"> <div class="s1"></div> <div class="s2"></div> <div class="s3"></div> <div class="s4"></div> <div class="centerbone"> <div class="clean"></div> </div> </div> CSS .bone{ position:

问题 I have the following code for a hexagon. I need a border around the hexagon and an image as a background of the hexagon instead of a plain color. body { background: #ecf0f1; } #hex1 { width: 200px; height: 200px; } #color1 { background-color: #D93; } .hexagon-wrapper { text-align: center; margin: 20px; position: relative; display: inline-block; } .hexagon { height: 100%; width: 57.735%; display: inline-block; } .hexagon:before { position: absolute; top: 0; right: 21.1325%; background-color: