css-shapes

问题 Hi I need create a line like this image but I don't know how to end rounded line-edge .line{ position: absolute; width: 55px; height: 10px; border: solid 12.5px #fff; border-color: white transparent transparent transparent; border-radius: 50%/100% 100% 0 0; transform: rotate(180deg); margin-left: 10px; margin-top: 50px;} Can you help me to end the line with redounded form? 回答1: You may add two background layers to create the circles at the edges like below: .line { --c:20px; /* control the

问题 I’m trying to realise a couples of element with this design : I also want to have a border radius like this : What I managed to do : For the first div, I didn’t managed to do inner box shadow for the ::before arrow and box shadow for the ::after arrow For the last div, I managed to do it but when I try to change the size of the arrow to make it larger, the box-shadows is not working anymore... body { background-color: white; } .test{ margin-top: -30px!important; } .test2{ z-index:13; } .test3

问题 I am wondering if it is possible to do something like this with css gradients: I have searched a lot and all the gradients are either "Linear" or "Radial". My desired gradient is linear in a circular way! 回答1: I'm afraid CSS doesn't allow for a linear-radial gradient. However, svg provides a solution, albeit crude. See the below topics for a solution. How to draw a linear gradient circle by svg? svg multiple color on circle stroke 回答2: This is called Conical Gradient and is not currently

问题 I have a problem making a shape for a li, I need it to have a diagonal line and a smooth border, but I can't get it. This its what i got for now. ul { list-style-type: none; margin: 0; padding: 0; list-style-position: inside; display:flex; } li { position: relative; height: 40px; width: 300px; margin: 10px; padding-right: 30px; line-height: 40px; text-align: right; text-transform: uppercase; border-radius: 8px; background: crimson; color: white; -webkit-clip-path: polygon(0% 0%, 0% 50%, 10%

问题 I have a filled circle that contains a number like so: How would I go about splitting this into two semi-circles, so that I can store two different numbers within it, like so: My CSS is as follows: .oval { display: inline-block; width: 75px; height: 75px; border-radius: 50%; background: #000000; color: white; line-height: 75px; font-size: medium; } 回答1: You can use border-radius .left-half, .right-half { float: left; width: 40px; height: 80px; line-height: 80px; color: white; text-align:

问题 I am trying to make a corner ribbon in a div and its going everywhere I want it to look neat and nice it goes over the div and does not sit well. /* The ribbons */ .corner-ribbon { width: 100px; background: #e43; position: absolute; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); overflow: hidden; } .corner-ribbon.shadow { box-shadow: 0 0 3px rgba(0, 0, 0, .3); } /* Different

问题 I want to create a effect as below with CSS, initially, I was thinking to merge two rectangle with rounded corner, but I can't use that way since it is a sharp angle, not rounded, look at the area in cirle, this is most hard part. So I do it this way: 1. Create a rounded rectangle as the outline. with border color gray. 2. Create a tringle with gray color at the center of the left side of the rect. 3. Create another triangle with white color to cover the gray triangle in step 2, with a little

问题 The bounty expires in 2 days . Answers to this question are eligible for a +50 reputation bounty. Qwerty wants to draw more attention to this question. I'm trying to wrap the text round the image used from both side like this : here is the html. <div class="container"> <div class="row"> <div class="col-lg-4"> <p> There’s nothing like the feeling of driving a brand new luxury car or fully equipped SUV – especially if it’s free! That’s right! As part of B-Epic’s Compensation Plan, one of the

问题 This question already has answers here : Making a plus sign with css (5 answers) Closed 12 months ago . I have the below CSS code which gives the + symbol but not matches the design basically it needs to be thin. See snippet and codpen .plus { position:relative; border: 1px dotted white; width: 3px; height: 3px; background-color: black; box-sizing: border-box; transform: scale(11); } <div class="plus"></div> Should Look like the below symbol: Any other styling is also fine for me but should

问题 This question already has answers here : draw angular side / parallelogram using CSS (3 answers) Closed 3 years ago . I am working on a project where I have to create something similar what is showing in the image below. Concretely, the yellow parallelograms with text that are showing inside the red rectangular (I dont need this red rectangular). As you know the divs by default are rectangular So then my question is, how could create 3 parallelogram-divs or something similiar? Any advices or