css-shapes

问题 I need to draw two curves, using CSS. I have tried to assemble some div s, using CSS border-radius to draw the curved panel. But the result is bad. Any better arithmetic? 回答1: As I had mentioned in comments earlier, please do not use CSS for achieving complex curves and shapes. While it is still possible to use CSS to achieve them (using transform + pseudo-elements like shown in this thread or using box-shadows in this thread), the process is very complex and you can't get much control over

问题 I'm trying to achieve this effect for a button: I've been battling it for a couple hours and the best I could come up with was this CodePen. <a href="#" class="btn-wrap"> <span class="btn btn-primary">See the Proof</span> </a> .btn { border: 0; border-radius: 0; font-weight: 300; font-size: 20px; text-transform: uppercase; } .btn-primary { position: relative; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } .btn-primary:before, .btn-primary:after {

问题 What would be your best option or method to create a shape as seen in the attachment link full CSS and is that possible anyway?? I did research and testing with CSS parallelogram e.g. but not with any good succes yet. See the shape here -->> http://tinypic.com/r/352ge3b/6 回答1: I had this thing that it could be done with just one element - and it can be done, I just don't think it's exactly the best solution to do it like this. DEMO HTML : <div class='speech-bubble'>Hello!</div> CSS : .speech

问题 What would be your best option or method to create a shape as seen in the attachment link full CSS and is that possible anyway?? I did research and testing with CSS parallelogram e.g. but not with any good succes yet. See the shape here -->> http://tinypic.com/r/352ge3b/6 回答1: I had this thing that it could be done with just one element - and it can be done, I just don't think it's exactly the best solution to do it like this. DEMO HTML : <div class='speech-bubble'>Hello!</div> CSS : .speech

问题 Hi I'm trying to create the following Angled Strip Look in HTML & CSS: Just the Blue and Purple area with white after. I can obviously see how to do it using an image but what about HTML/CSS only? Is this possible? Its used on the site - www.africa.dating I know I should have more example code but I'm actually not sure where to begin so I only have the following HTML: Fiddle: http://jsfiddle.net/e2dr5udr/3/ <div id="container"> <div id="blue"></div> <div id="purple"></div> </div> #container {

问题 I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve: My initial idea is to create the shape based on three shapes and then colorize the borders accordingly: But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone? 回答1: This approach allows you to: add any content and the borders will adapt around it regardless of height or width of the content

问题 How do i make this type of pentagone without -webkit-clip-path because its doesn't work most of the browser like Firefox, IE9. My code: http://codepen.io/anon/pen/MYbKrQ div { width: 150px; height: 150px; background: #1e90ff; -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); } /* Center the demo */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; } <div></div>

问题 It has been a long time since I built this triangle which points up. How can I alter my CSS to point the corner left? http://jsfiddle.net/3sP8q/ .left-corner { width: 0; height: 0; border-bottom: 15px solid #000; border-left: 15px solid transparent; border-right: 15px solid transparent; position: relative; } <div class="left-corner"></div> 回答1: Here is how: .left-corner { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid

问题 Hello I'm looking to build in CSS3 an image with round corners and a very light oval shape, like in this pic. Not sure if it's possible and how. I know how to build a round image or an image with round corners, but this is a little different. UPDATE Here is what I've done .round{ background-color:red; width:100px; height:100px; border-top-left-radius: 45px 40px; border-top-right-radius: 45px 40px; border-bottom-left-radius: 45px 40px; border-bottom-right-radius: 45px 40px; } http://jsfiddle

问题 As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it? Here is my code: body{ background:lightblue;; } .block{ background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11); border: 1px solid #fff; width: