css-shapes | 易学教程

Draw half circle with CSS or SVG

阅读更多关于 Draw half circle with CSS or SVG

问题 I'm looking for a way to draw the bottom portion of this circle using CSS or SVG. I've seen this answer but it deals with a perfect half circle, whereas I need an extra segment cut off to make it a bit less than half. It's probably not possible with pure CSS but the SVG answer gets complicated for me to modify. <svg class="pie"> <circle cx="115" cy="115" r="110"></circle> <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path> </svg> 回答1: You can do it with CSS: .partial-circle { position:

how to create css concave/convex shapes

阅读更多关于 how to create css concave/convex shapes

问题 I want to create two divs with the background white shape depicted below. As you can see it's basically a rectangle and a ellipse-shape being cut out. It should be able to produce a box-shadow. Is there a way to achieve this with css only? 回答1: I have used 2 div's with box-shadow i have added border for understanding body { background:url(https://placeimg.com/640/480/any); } .out { width: 455px; height: 275px; border: 1px solid red; position: relative; overflow: hidden; margin: 20px; } .in {

CSS triangle to fit variable sized div elements

阅读更多关于 CSS triangle to fit variable sized div elements

问题 Please refer to my fiddle. I was aiming to create a triangle (to be placed inside a div), and make it fit exactly (corner to corner). Here are the rules outlined: Place the triangle inside all the div elements. The bottom left corner of the triangle should fit the bottom left corner inside all the divs. The top right corner of the triangle should fit the top right corner inside all the divs. The divs has fixed width and height BUT in real life they are all unknown, inherited from a parent.

How do I draw a horizontal line between two circles with CSS?

阅读更多关于 How do I draw a horizontal line between two circles with CSS?

问题 How do I draw a horizontal line in between 2 circles in CSS? It has to be in the middle of them just as shown in the screenshot. Example here: I have drawn the 2 circles, but don't know how to connect them. #status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none; } #status-buttons a:hover { text-decoration: none; } #status-buttons a.active span { color

How can I create the shape of side mirrors of a truck/lorry?

阅读更多关于 How can I create the shape of side mirrors of a truck/lorry?

问题 .circle { width: 40px; height: 40px; border-radius: 50%; background-color: yellow; position: absolute; z-index: 20; border: 1px solid #AAAAAA; box-shadow: 0 0 8px 2px yellow; } .roof { width: 280px; height: 80px; background-color: gray; border-top-left-radius: 50%; border-top-right-radius: 50%; left: 0; z-index: -2; position: relative; } .windscreen { width: 260px; height: 75px; background: rgb(41, 137, 216); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10

Generate arrow line with CSS [duplicate]

阅读更多关于 Generate arrow line with CSS [duplicate]

This question already has answers here : Border with a transparent centred arrow (3 answers) Closed 3 years ago . I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like: I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up producing the right result. I need control over the line's thickness and color. The angle of the

Split CSS circle into 3 equal parts with linear gradients - pie chart style

阅读更多关于 Split CSS circle into 3 equal parts with linear gradients - pie chart style

I'm trying to create a progress indicator - and to a certain extent I've done it, but it's not what I want to end up with. Here's an image: As you can see the indicator shows 1 third, 2 thirds, then full. This is what I want to achieve except that I want the first, second and third sections to be different colors, so I would end up with 3 equal slices in 3 different colors starting at 12 o'clock. Here's the code - I've removed the centre section because it's not relevant to the question: ( the CSS is in Less syntax ) .timeline { h3 { position:relative; & > .step { background-color:@accentColor

shape-outside of an image centered between two text blocks

阅读更多关于 shape-outside of an image centered between two text blocks

问题 I'd like to have an image between two blocks of text, and have all of this centered. The image should have shape-outside property allowing the text to overflow it in a circular shape like this: Where: red block = text black circle = image My current code uses flex to center the entire thing, but it turns out shape-outside doesn't work with. div{ display:flex; flex-flow:row nowrap; } img{float:left; shape-outside:circle(100px at 50%); width:200px;height:200px;} p{width:600px;} <div> <p> Lorem

Create Box With Diagonal Edge

阅读更多关于 Create Box With Diagonal Edge

I need to create a box with a diagonal edge. Below is the picture and here is a link to it . How would I do this using only CSS and HTML? I'm aware its possible to create triangles in CSS, so maybe I create one div with the rounded corners for the 'yellow' portion of the box. Not sure how to do the inside grey part though. I'd like to avoid the multiple images solution because this will be on mobile so that it loads as quickly as possible. I'm looking into a solution with 3 divs inside and one being a triangle, I found a triangle maker here , then maybe relative position on the yellow div, and

Is it possible to make a “double arrow” with css3 content technique?

阅读更多关于 Is it possible to make a “double arrow” with css3 content technique?

问题 Im looking for a way to recreate this button with CSS only. I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images). The buttons I need this style on are <input["submit"]> and ordinary <a> 's. 回答1: With one element, you could do it using gradients and skewed pseudo-elements for a link: demo (you could actually do it using just gradients, but then a hover