css-shapes | 易学教程

Overlapping circles in CSS with 1 div

阅读更多关于 Overlapping circles in CSS with 1 div

问题 I'm looking to create this overlapping circles shape in CSS: Basically, just stacked circles. I've looked around, and all solutions I see include using multiple div elements for this effect. However, can't this be done with a single div, using CSS3? I looked at how it could be easily done, and figured that, if all colours are the same, you'd have a pill shape like this: http://jsfiddle.net/5wytm0r4/ #circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } <div id=

How to create a curve as shown below for the div

阅读更多关于 How to create a curve as shown below for the div

I have a problem when creating a div above the circle as shown below! I have set up like this CSS: .count-select { box-shadow: 0 -5px 10px -5px rgba(0,0,0,.8); border-top: 2px solid #E75532; height: auto; width: 100%; background: #fff; position: fixed; bottom: 0; padding: 12px; border-radius: 50%/100px 100px 0 0; } As a result, it is not like the design, expect people to help. Thank you! You can make the element to overflow by adding negative values to left/right. then add some padding to avoid content overflow like this : .container { width: 200px; border: 1px solid blue; height: 200px;

Hexagon shape with CSS3

阅读更多关于 Hexagon shape with CSS3

Can such a hexagon be created with pure CSS3? Thanks for any help! A simple search turned this up: CSS Hexagon Tutorial Referenced from the site: Put a 104px × 60px div with a background colour between them and you get (the hexagon): width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; width: 104px; height: 60px; background-color: #6C6; width: 0; border-top: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; Hushme in CSS3, everything is possible. HTML: <div class="hexagon hexagon1"><div

background image, linear gradient jagged edged result needs to be smooth edged

阅读更多关于 background image, linear gradient jagged edged result needs to be smooth edged

I'm trying to make the bottom of an image pointed. I've tried to get this effect by producing two triangles at the bottom. They must be responsive. and after searching all over the internet with a lot of examples that don't work for my requirement this is the best so far I've managed to produce. body, html { height: 100% } .image { width: 1410px; margin-right: auto; margin-left: auto; height: 500px; overflow: hidden; position: relative; } .pointer { height: 50px; position: absolute; bottom: 0; left: 0; width: 100%; } .triangleWrapper { width: 50%; height: 50px; float: left; } .lefttriangle {

Double curved shape

阅读更多关于 Double curved shape

I am currently attempting to generate a 'wavy ghostly bottom' shape. This shape contains two double curves: Although the bottom part of this image I think portrays it in better imagery. My Code My Current Attempt to generate this shape was using pseudo elements and overflow: hidden , although this does not allow for a gradient background (would require a plain background): Attempt 1 - Using Pseudo Elements with overflow hidden .bottom { height: 300px; width: 300px; background: lightgray; position: relative; overflow: hidden; margin-top:-150px; -webkit-transform:rotate(45deg); transform:rotate

Creating a Tab shape with CSS or SVG

阅读更多关于 Creating a Tab shape with CSS or SVG

问题 Does anyone have an idea how to make this tab like shape : 回答1: Here is an alternate approach using CSS3 transforms for achieving the required shape. Like the SVG answer, this method can also be used when the background (behind the shape) is not a solid color. The snippet has two samples and One uses transform: skew(45deg) and overflow: hidden on the parent to hide the skewed area on the left side. Other uses a rotateX transform with a bit of perspective to produce the skewed/angled side. The

CSS: Make border on pure-CSS arrow

阅读更多关于 CSS: Make border on pure-CSS arrow

问题 I have this code snippet: .multiply-button { display: table; background: rgba(0, 0, 0, 0); border: none; color: white; padding: 0; } .multiply-button-content { display: table-cell; background: green; padding: 10px 9px; border: solid 1px black; border-right: none !important; } .multiply-button-arrow { display: table-cell; width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent green; } <button id="multiply-button" class=

Skewed Borders on a Div

阅读更多关于 Skewed Borders on a Div

I'm trying to skew a div, similar to this: Slant the top of a div using css without skewing text or this: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/ Here's an image of what I'm trying to do: Basically, I need to slant the borders in weird ways on all 4 sides . I can do this with background images, but I'd prefer some way to do this in CSS so the divs can be responsive in width and height. I'd like to find a solution that works on older browsers, but I understand I can't have everything! What would be the best way to have slanted borders on all 4 sides? (Note: the border

Create a border gradient for each of the 4 borders

阅读更多关于 Create a border gradient for each of the 4 borders

问题 I want to create the same linear gradient for each border. The border gradient with 5 colors starts from transparent to white to black to white to transparent That way I have transparent corners. How can I do this for all 4 borders? Is it possible to assign a linear-gradient to a border? Sidenote: It should run without too much effort on IE9+ else IE10+ :P 回答1: How about using a radial gradient? Although this is just a mock up, you can see the basic effect. .outer { vertical-align:top;

Background with gradient responsive

阅读更多关于 Background with gradient responsive

问题 I have the following code: (Fiddle) body { background-color: red; } #grad1 { height: 100px; width: 100%; background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%); } <div id="grad1"></div> I basically want the width to be responsive and the gradient's shape to be maintained even though the width changes. What I've tried: Set the width to 100% this doesn't work because its an empty div That's about it, I have no other ideas to be honest.