css-shapes | 易学教程

How to create a lollipop shape by stacking divs in a circular manner?

阅读更多关于 How to create a lollipop shape by stacking divs in a circular manner?

How to stack divs in a circular manner in which last div should come beneath the first div but above the second last div. Is it possible with the css? any helps would be appreciated. Please find the Codepen . Giving the sample code snippet <div class="frame"> <div class="lolly-pop__wrapper"> <div class="lollypop-top"> <div class="lollypop-top__item"></div> <div class="lollypop-top__item"></div> <div class="lollypop-top__item"></div> <div class="lollypop-top__item"></div> <div class="lollypop-top__item"></div> <div class="lollypop-top__item"></div> <div class="lollypop-top__item"></div> <div

How to create a speech bubble in css?

阅读更多关于 How to create a speech bubble in css?

I would like to create a speech like this, I try to create using CSS. But I cannot align the top arrow like this. My Code is, .bubble { position: relative; width: 275px; height: 40px; padding: 5px; background: #C00006; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } .bubble:after { content: ''; position: absolute; border-style: solid; border-width: 0 19px 79px; border-color: #C00006 transparent; display: block; width: 0; z-index: 1; margin-left: -19px; top: -79px; left: 69%; } <br><br><br><br> <div class="bubble"></div> Online example (on JSFiddle) . You could

CSS triangle :before element

阅读更多关于 CSS triangle :before element

问题 I'm using bootstrap, trying to make a div have a CSS triangle before it. http://jsfiddle.net/B2XvZ/11/ Here is my non-working code: .d:before { width: 0px; height: 0px; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #dd4397 transparent transparent; } The way I'd like it to look is for there to be a pink left-pointing triangle right before the text "this", with no gap between it and the div. I've tried to do this by floating the elements also, with no success.

Custom scoop border style - responsive, Custom & dynamic border style - fit in height, Custom border corner - double stroke [closed]

阅读更多关于 Custom scoop border style - responsive, Custom & dynamic border style - fit in height, Custom border corner - double stroke [closed]

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . Is there any way to make custom scoop border style in CSS or jQuery? Like the image below: 回答1: Here's a fiddle ...http://jsfiddle.net/zjw3pg2e/5/ Does this work for you? body { background: #D8D8D8; } .corner { background:white; height:20px; width:20px; position:absolute; } #sw {

How to achieve a trapezoid in CSS3?

阅读更多关于 How to achieve a trapezoid in CSS3?

问题 I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners? JSFiddle Thank you 回答1: You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not

How to put text on a CSS Triangle

阅读更多关于 How to put text on a CSS Triangle

问题 I must be missing a simple step. I have made a triangle in CSS and I'm trying to put text on top of the triangle. It works if I don't have the width:0; and height:0; but the triangle does not size right without it. The text is in there, but it wont show on the triangle. Can someone assist? .log{ /*bottom*/ width:0; height:0; top:73.2%; left:36.4%; z-index:2; background-color:#E3DFD2; border-top:12vw solid black; border-right:9vw solid transparent ; border-left:9vw solid transparent; transform

Adding border to CSS triangle [duplicate]

阅读更多关于 Adding border to CSS triangle [duplicate]

This question already has an answer here: CSS triangle custom border color 5 answers I have a triangle <div class="triangle-left"></div> .triangle-left { width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 22px solid white; } How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs? One way to do it is the create an inner triangle which is smaller. .triangle-left { width: 0; height: 0; border-top: 23px solid transparent; border-bottom: 23px solid transparent; border-right: 23px

Creating a CSS double border line with a step in the middle

阅读更多关于 Creating a CSS double border line with a step in the middle

I'm trying to achieve this(Pic below) with strictly CSS and HTML for this header to be displayed on mobile devices. I was able to get it done, although I believe my way of doing this might be wrong. I'm adding these in two containers and getting them aligned and connected just right, is just almost impossible. Here's my CSS: #shape1:before{ position: absolute; bottom: 30px; left: -4px; content: ''; height: 15px; width: 41%; border-bottom: 3.5px solid #000000; border-right: 4.5px solid #000000; transform: skew(-45deg); } #shape1:after{ position: absolute; content: ''; bottom: 24px; left: 0px;

Slanted text container

阅读更多关于 Slanted text container

I was wondering if any of you knew if it was possible to make anything looking like this : I know about http://www.infimum.dk/HTML/slantinfo.html but I can't put any text in the slanted areas . Did it with a bit of javascript: http://jsfiddle.net/billymoon/AvmE8/ But that is just for convenience, you can do the same with HTML. Will not apply to all circumstances, and will need a little tweaking, but can be made to work for things you know the approximate length of - or know the upper bound of. html: <div id='left'>whatever text</div><div id='right'>random text</div> css: #left, #right{ text

how to create Hollow triangle in css [duplicate]

阅读更多关于 how to create Hollow triangle in css [duplicate]

This question already has an answer here: Create a triangle with CSS? 8 answers I want create hollow triangle with CSS but I don't how to hollow that. I can create triangle with CSS but I have one problem and this is: I can't hollow this triangle. This is my code: HTML: <div id="tringle"></div> CSS: #tringle { position: absolute; height: 0; width: 0; top: 50%; left: 7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid white; } Not exactly cross-browser but works. Hope I've understood your request. http://jsfiddle.net/wmDNr/3/ .triangle { position: