css-shapes | 易学教程

How to make angled tab like this using css?

阅读更多关于 How to make angled tab like this using css?

问题 I need to make like this. Is it possible with pure css? 回答1: Using border-radius , :before and transform: skew(...); body { background-color: #000; margin: 0; padding: 0; font-family: sans-serif; font-size: 16px; } .tab { height: 50px; width: 150px; border-radius: 15px 15px 0px 0px; background-color: #FFF; position: relative; top: 10px; left: 1px; display: inline-block; z-index: 2; } .tab:before { height: 50px; width: 70px; border-radius: 10px 10px 0px 0px; background-color: white; content: "

CSS box shadow around a custom shape?

阅读更多关于 CSS box shadow around a custom shape?

Hy there, I need to create a div which looks like this: screenshot http://imageshack.us/a/img19/8223/bubblep.png What i've came up with so far is this: http://jsfiddle.net/suamikim/ft33k/ .bubble { position: relative; width: 80px; height: 160px; border: 1px solid #33A7F4; border-radius: 9px; margin: 100px; -webkit-box-shadow: 0px 0px 20px 2px #33A7F4; -moz-box-shadow: 0px 0px 20px 2px #33A7F4; -ms-box-shadow: 0px 0px 20px 2px #33A7F4; -o-box-shadow: 0px 0px 20px 2px #33A7F4; box-shadow: 0px 0px 20px 2px #33A7F4; } .bubble:after, .bubble:before { content: ' '; position: absolute; width: 0;

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. Ali Aboussebaba All you have to do is to change border-radius: 40px to border-radius: 50% . .oval { width: 160px; height: 80px; background: #a84909; border-radius: 50%; } <div class="oval"><

CSS to create curved corner between two elements?

阅读更多关于 CSS to create curved corner between two elements?

问题 My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner . See the white arrow in the image below. To extend the blue <li> to the edge of the <ul> , I'm planning to do something like this: li { right-margin: 2em; border-radius: 8px; } li.active { right-margin: 0; border-bottom-right-radius: 0; border-top

How do I make a CSS triangle with smooth edges?

阅读更多关于 How do I make a CSS triangle with smooth edges?

问题 I have a triangle (JSFiddle) using this CSS: .triangle { width: 0; height: 0; border-top: 0; border-bottom: 30px solid #666699; border-left: 20px solid transparent; border-right: 20px solid transparent; } And this HTML: <div class="triangle"></div> This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.) 回答1: Even in pure CSS we

How can I create a round arrow with only HTML and CSS?

阅读更多关于 How can I create a round arrow with only HTML and CSS?

I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts. Attempt 1 In this I have rotated the <div> and an arrow, but both are in different positions. This is the CSS: #curves div { width: 100px; height: 100px; border: 5px solid #999; } #curves.width div { border-color: transparent transparent transparent #999; } #curve1 { -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; } .arrow-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 27px solid #ccc; float: right; margin-top: -7px;

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-bottom: 41px solid transparent; border-left: 15px solid #C4C4C4; float: left; cursor: pointer; } Ana

CSS: Responsive elongated hexagon with text and gradient background/border

阅读更多关于 CSS: Responsive elongated hexagon with text and gradient background/border

问题 I'm trying to create two elongated hexagons in like: The main features should be: possibility to add a gradient background possibility to add a gradient border text could be two-lined or single-lined responsive in a Bootstrap-grid (nice to have) - angles of corners should be always the same. According to Elongated hexagon shaped button using only one element the best solution so far is like https://jsfiddle.net/veuc78af/: /*hexagons*/ .hexagon { box-sizing: border-box; position: relative;

3D Box Shadow effect

阅读更多关于 3D Box Shadow effect

问题 So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below. The effect I'm trying to achieve is a 3D box shadow, as shown in the bottom of the graphic below. Any ideas on how to do this with CSS3 box shadows? 回答1: Unfortunately box shadows are effectively just flat layers. However you can apply multiple box shadows to create this effect. .box-shadow-3d{ box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 3px 0px #999, 4px 4px 0px #999, 5px 5px 0px #999,

Border corner shape scoop doesn't work

阅读更多关于 Border corner shape scoop doesn't work

问题 I want to achieve the below shape using border-corner-shape property. But it doesn't work. My code is available below: .left-1 { background-color: #3498DB; border-corner-shape: scoop; border-radius: 30px; width: 200px; height: 200px; } <div class="left-1"></div> Why does it not work? 回答1: Using Radial Gradients: Here is another alternative method to achieve the border corner scoop effect using radial gradients. In this method, we use multiple radial gradients and position them at the corners.