css-shapes | 易学教程

how to make an oval in css?

阅读更多关于 how to make an oval in css?

问题 I want to make an oval like: But when i used this code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>Oval</title> <style type="text/css"> .oval { width: 160px; height: 80px; background: #a84909; border-radius: 40px; } </style> </head> <body> <div class="oval"></div> </body> </html> It gives me this: To make a circle it works, but an oval not. 回答1: All you have to do is to change border-radius: 40px to border-radius: 50% . .oval {

css gradient for triangle shaped arrow

阅读更多关于 css gradient for triangle shaped arrow

问题 Please take a look at http://jsfiddle.net/ghAgQ/ I need the same gradient for arrow, as it is for the rectangle. Any ideas how thats done? Thanks .rectangle { background-color: #EEE; height: 80px; width: 240px; border: 1px solid #CCC; background: white; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(37%,#F1F1F1), color-stop(57%,#E1E1E1), color-stop(100%,#F6F6F6)); float: left; } .arrow { border-top: 41px solid transparent; border

How to make a curved edge hexagon by using CSS

阅读更多关于 How to make a curved edge hexagon by using CSS

This is my CSS. CSS #hexagon-circle { width: 100px; height: 55px; background: red; position: relative; border-radius: 10px;} #hexagon-circle:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 29px solid red; border-radius: 10px;} #hexagon-circle:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 29px solid red; border-radius: 10px;} The output is 4

How to create uneven rounded sides on a div?

阅读更多关于 How to create uneven rounded sides on a div?

I've been trying to make a DIV with uneven rounded sides like this: I've checked some solutions and the closest I can get to it is by using border-radius. I've used: border-bottom-left-radius: 80%50px; border-bottom-right-radius: 30%30px; And this is what I've got: How can this be done? You can consider clip-path .box { height: 200px; width: 200px; background: blue; -webkit-clip-path: circle(75% at 65% 10%); clip-path: circle(75% at 65% 10%); } <div class="box"> </div> Or use radial-gradient .box { height: 200px; width: 200px; background: radial-gradient(circle at 65% 10%, blue 75%,transparent

How to add border in my clip-path: polygon(); CSS style

阅读更多关于 How to add border in my clip-path: polygon(); CSS style

I want to know if it is a possible to add border in my clip-path:polygon(); style or any another way to add border? like : border:5px solid red; CSS .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%

How to create a curve between two gradient divs in CSS?

阅读更多关于 How to create a curve between two gradient divs in CSS?

问题 I have two divs with distinct gradient background and I need to create a S-Shape curve between them. Here's the example fiddle for gradient divs: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/ <div id="section1"> </div> <div id="section2"> </div> #section1{ height:200px; background: linear-gradient(to bottom right, #ad3, #add); } #section2{ height:200px; background: linear-gradient(to bottom right, #de350b, #0065ff); } There are couple of things which crossed my mind but: - svg: don't know how

How to Make A Fancy Arrow Using CSS?

阅读更多关于 How to Make A Fancy Arrow Using CSS?

Ok, so everyone knows you can make a triangle using this: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this? You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after , and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using

CSS Zigzag Border with a Textured Background

阅读更多关于 CSS Zigzag Border with a Textured Background

问题 I've been working on a header with a zigzag border. One way to do this is to use images to make the zigzag effect. (1) Is there any way to create a practical cross-browser zigzag border in CSS without the use of images? I am also trying to put a textured background on this header that extends to the zigzags. However, the vertical size of the header may change and I am unable to implement the header as a single image. If I try to add a texture to both the zigzag edges and the header element,

how to handle 'double opacity' of two overlapping divs

阅读更多关于 how to handle 'double opacity' of two overlapping divs

问题 I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can't use an image. EDIT -- The little circle is supposed to have a canvas element in it. Not sure if pseudo-elements would be the best solution. Is there anyway to do this with CSS, or should I just use canvas? example - http://dabblet.com/gist/1566209 HTML: <div id="foo"> <div id="bar"> </div> </div> CSS: /** * Double Opacity */ body{background:green;} #foo{

Align text on slanted line

阅读更多关于 Align text on slanted line

Is it posible to make text left aligned on a slanted line ? it's alignement should follow the slanted slanted image with required support for IE9+? My example code : img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } <div> <img src="http://placehold.it/150x250&text=img" alt="image" /> <p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi