There&#39;re plenty of different CSS shapes over at [CSS Tricks - Shapes of CSS][1] and I&#39;m particularly puzzled with a triangle:

![CSS Triangle][2]

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }


&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;triangle-up&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


How and why does it work?


  [1]: http://css-tricks.com/examples/ShapesOfCSS/
  [2]: http://i.stack.imgur.com/Zcyzo.png

How do CSS triangles work?

How do I create a menu which looks like so:

![Tooltip Image][1]

[Link to PSD][2]

I don&#39;t want to use the PSD images. I would prefer using icons from some package like [FontAwesome][3] and have the backgrounds/css generated in CSS.

A version of the menu that is using the PSD to to generate images of the tooltip and then using it can be found [here][4].

  [1]: http://i.stack.imgur.com/hb5aQ.png
  [2]: http://dribbble.com/shots/732391-Tooltip-PSD
  [3]: http://fortawesome.github.com/Font-Awesome/
  [4]: http://theearlcarlson.com/experiments/amTooltip/

How to create a radial menu in CSS?

I would like to surround a number in a circle like in this image:  


![Number in Circle Image][1]

Is this possible and how is it achieved?

  [1]: http://i.stack.imgur.com/GvOrl.png

How to use CSS to surround a number with a circle?

I want to have a web page which has one centered word. 

I want this word to be drawn with an animation, such that the page &quot;writes&quot; the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such that the end result is a glyph. 

I do not care if this is done with `&lt;canvas&gt;` or the DOM, and I don&#39;t care whether it&#39;s done with JavaScript or CSS. The absence of jQuery would be nice, but not required.

How can I do this? I&#39;ve searched *exhaustively* with no luck.

How can I animate the drawing of text on a web page?

How do I create a shape like this to display on a webpage?  

I don&#39;t want to use **images** since they would get blurry on scaling  

![Teardrop shape I need to make with HTML, CSS or SVG][1]

I tried with *CSS*:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .tear {
      display: inline-block;
      transform: rotate(-30deg);
      border: 5px solid green;
      width: 50px;
      height: 100px;
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;tear&quot;&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

That turned out really screwed.

And then I tried with SVG:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;svg viewBox=&quot;0 100 100&quot;&gt;
      &lt;polygon points=&quot;50,0 100,70 50,100 0,70&quot;/&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;

It did get the shape, but the bottom part wasn&#39;t curved.

Is there a way to create this shape so it can be used in an HTML page?

  [1]: http://i.stack.imgur.com/3dFQ5.png


How do I create a teardrop in HTML?

This is the CSS:

    div {
        width: 0;
        height: 0;
        border: 180px solid red;
        border-radius: 180px;
    }

How does it produce the circle below?

![Enter image description here][1]

Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this: 

![Enter image description here][2]

After applying border-radius 30 pixels it would appear like this:

![Enter image description here][3]

The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases.

So, how does a border of 180 pixels with `height/width-&gt; 0px` become a circle with a radius of 180 pixels?

  [1]: http://i.stack.imgur.com/yTmLN.jpg
  [2]: http://i.stack.imgur.com/nvK6a.jpg
  [3]: http://i.stack.imgur.com/xEutT.jpg


How does this CSS produce a circle?

I&#39;m wondering if there&#39;s an easier way to create circular divs than what I&#39;m doing now.

Currently, I am just making an image for each different size, but it&#39;s annoying to do this.

Is there anyway using CSS to make divs which are circular and I can specify the radius?

Easier way to create circle div than using an image?

I found this example on stackoverflow:

https://stackoverflow.com/questions/6936972/draw-circle-using-css-alone

Which is great.  But I&#39;d like to know how to modify that example so that I can include text in the middle of the circle?

I also found this:  https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific

but for some reason, its not working for me.  When I create the following test code: 

    &lt;div class=&quot;badge&quot;&gt;1&lt;/div&gt;

instead of a circle, I get a oval shape.
I&#39;m trying to play around with the code to see how I can get it to work.

How to draw a circle with text in the middle?

Is it possible to control the length and distance between dashed border strokes in CSS?

This example below displays differently between browsers:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      border: dashed 4px #000;
      padding: 20px;
      display: inline-block;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;I have a dashed border!&lt;/div&gt;

&lt;!-- end snippet --&gt;

Big differences: IE 11 / Firefox / Chrome

![IE 11 border][1]![Firefox Border][2]![Chrome border][3]

Are there any methods that can provide greater control of the dashed borders appearance?


  [1]: http://i.stack.imgur.com/46yC4.png
  [2]: http://i.stack.imgur.com/4ELcb.png
  [3]: http://i.stack.imgur.com/0iJTT.png

Control the dashed border stroke length and distance between strokes

If I use a **pixel or em value** for border-radius, the edge radius is always a **circular arc** or a **pill shape** even if the value is greater than the largest side of the element.  

When I use **percentages**, the edge radius is elliptic and starts at the middle of each side of the element resulting in an **oval or ellipse shape** :

![pixel (px) border radius][1]![percent (%) border-radius][2]

Pixel value for border-radius :
&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    div {
       background: teal;
       border-radius: 999px;
       width: 230px;
       height: 100px;
       padding: 40px 10px;
       box-sizing: border-box;
       font-family: courier;
       color: #fff;
     }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;border-radius:999px;&lt;/div&gt;

&lt;!-- end snippet --&gt;


Percent value for border-radius :

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      background: teal;
      border-radius: 50%;
      width: 230px;
      height: 100px;
      padding:40px 10px;
      box-sizing:border-box;
      font-family:courier;
      color:#fff;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;border-radius:50%;&lt;/div&gt;

&lt;!-- end snippet --&gt;

Why doesn&#39;t border radius in percentages act the same way as border-radius set with pixel or em values?

  [1]: http://i.stack.imgur.com/ecMlo.png
  [2]: http://i.imgur.com/XGkAcJA.png

Border-radius in percentage (%) and pixels (px) or em

Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?


Draw Circle using css alone

How do you draw a circle using HTML5 and CSS3? 

Is it also possible to put text inside?

How to draw circle in html page?

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%.

I would like it to stop at certain percentages like in the screenshot below. Is there any way I can do that using only CSS?

[![Circular progress bars][1]][1]


  [1]: http://i.stack.imgur.com/DzNnN.png

CSS Progress Circle

Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here&#39;s what I have so far:

    .container {
        margin-left: 15px;
        width: 200px;
        background: #FFFFFF;
        border: 1px solid #CAD5E0;
        padding: 4px;
        position: relative;
        min-height: 200px;
    }

    .container:after {
        content: &#39;&#39;;
        display: block;
        position: absolute;
        top: 10px;
        left: 100%;
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #CAD5E0;
        border-style: solid;
        border-width: 10px;
    }​

My fiddle: http://jsfiddle.net/4ZeCz/

CSS triangle custom border color

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?

![an arrow with only two lines that intersect at the point. Like a greater than sign: &gt;][1]

  [1]: http://i.stack.imgur.com/fMhGv.png

How to Make A Chevron Arrow Using CSS?

I&#39;m trying to recreate this image with CSS:

![wayvy shape][1]

I would not need it to repeat. This is what I started but it just has a straight line:


&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #wave {
      position: absolute;
      height: 70px;
      width: 600px;
      background: #e0efe3;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;wave&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;



  [1]: http://i.stack.imgur.com/Jq0kf.png

Wavy shape with css

Is there any way to make a **transparent text cut out of a background** effect like the one in the following image, with CSS?  
It would be sad to lose all precious SEO because of images replacing text.

![Transparent text cut out of background][1]

I first thought of shadows but I can&#39;t figure anything out...  
  
The image is the site background, an absolute positioned `&lt;img&gt;` tag 


  [1]: http://i.stack.imgur.com/V6Bu7.png

Transparent text cut out of background

I&#39;m trying to create a circle with CSS, which looks exactly like on the following picture:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/Rt3yC.png

...with only one `div`:

    &lt;div class=&quot;myCircle&quot;&gt;&lt;/div&gt;

and by using **only CSS** definitions. No SVG, WebGL, DirectX, [...] allowed.

I&#39;ve tried to draw a full circle and fading half of it with another `div`, and it does work, but I&#39;m looking for a more elegant alternative.

Half circle with CSS (border, outline only)

I am trying to create a shape like in the image below with a **slanted edge on only one side** (for example, the bottom side) while the other edges remain straight.

![CSS div with a slanted side][1]

I tried using the border method (code is given below) but the dimensions of my shape are dynamic and hence I cannot use this method.

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .shape {
        position: relative;
        height: 100px;
        width: 200px;
        background: tomato;
    }
    .shape:after {
        position: absolute;
        content: &#39;&#39;;
        height: 0px;
        width: 0px;
        left: 0px;
        bottom: -100px;
        border-width: 50px 100px;
        border-style: solid;
        border-color: tomato tomato transparent transparent;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;shape&quot;&gt;
        Some content
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

---

I have also tried using gradients for background (like in the below code) but it gets messed up as the dimensions change. You can see what I mean by hovering on the shape in the below snippet.

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    .gradient {
      display: inline-block;
      vertical-align: top;
      height: 200px;
      width: 100px;
      margin: 10px;
      color: beige;
      transition: all 1s;
      padding: 10px;
      background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
    }
    .gradient:hover {
      width: 200px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;gradient&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

How can I create this **shape with a slanted side** and also be able to support **dynamic sizes**?

  [1]: http://i.stack.imgur.com/ywYFD.png

Shape with a slanted side (responsive)

I just came across a neat CSS trick. Check out the fiddle...

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .tooltiptail {
      display: block;
      border-color: #ffffff #a0c7ff #ffffff #ffffff;
      border-style: solid;
      border-width: 20px;
      width: 0px;
      height: 0px;
    }
    .anothertail {
      background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
      display: block;
      height: 29px;
      width: 30px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;Cool Trick:
      &lt;br /&gt;
      &lt;div class=&quot;tooltiptail&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;br /&gt;

    &lt;div&gt;How do I get this effect with only CSS?
      &lt;br /&gt;
      &lt;div class=&quot;anothertail&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

This creates a little arrow/triangle-like effect, a &quot;tooltip tail&quot;. This blows my mind! **I&#39;m really interested in knowing how this works?!**

Further, is there a way to extend this CSS trick to create an effect as follows:

![enter image description here][1]

This is an interesting problem. Can this be done using only CSS, ignoring the shadow for now?


----------


UPDATE 1
-----------------------

I figured out a solution to my initial question. Here&#39;s the fiddle... 

http://jsfiddle.net/duZAx/7/

HTML

    &lt;div style=&quot;position: relative;&quot;&gt;Cool Trick:&lt;br /&gt;
        &lt;div class=&quot;tooltiptail&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;tooltiptail2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS

    .tooltiptail {
        display: block;
        border-color: #ffffff #a0c7ff #ffffff #ffffff;
        border-style: solid;
        border-width: 20px;
        width: 0px;
        height: 0px;
    }
    .tooltiptail2 {
        display: block;
        border-color: transparent #ffffff transparent transparent;
        border-style: solid;
        border-width: 18px;
        width: 0px;
        height: 0px;
        position: relative;
        left: 4px;
        top: -38px;
    }

Now, how do I exactly mimic the little picture above using pure CSS, including the shadow and having it cross-browser compatible?


----------


UPDATE 2
---------------------------

Here&#39;s my solution after a combination of the answers below. I haven&#39;t tested it across multiple browsers, but it looks great in Chrome. 

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

    &lt;div id=&quot;toolTip&quot;&gt;
        &lt;p&gt;i can haz css tooltip&lt;/p&gt;
        &lt;div id=&quot;tailShadow&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;tail1&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;tail2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS
    
    #toolTip {
        background-color: #ffffff;
        border: 1px solid #73a7f0;
        width: 200px;
        height: 100px;
        margin-left: 32px;
        position:relative;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: 0px 0px 8px -1px black;
        -moz-box-shadow: 0px 0px 8px -1px black;
        -webkit-box-shadow: 0px 0px 8px -1px black;
    }
    
    #toolTip p {
        padding:10px;
    }
    
    #tailShadow {
        background-color: transparent;
        width: 4px;
        height: 4px;
        position: absolute;
        top: 16px;
        left: -8px;
        z-index: -10;
        box-shadow: 0px 0px 8px 1px black;
        -moz-box-shadow: 0px 0px 8px 1px black;
        -webkit-box-shadow: 0px 0px 8px 1px black;
    }
    
    #tail1 {
        width: 0px;
        height: 0px;
        border: 10px solid;
        border-color: transparent #73a7f0 transparent transparent;
        position:absolute;
        top: 8px;
        left: -20px;
    }
    
    #tail2 {
        width: 0px;
        height: 0px;
        border: 10px solid;
        border-color: transparent #ffffff transparent transparent;
        position:absolute;
        left: -18px;
        top: 8px;
    }

----------


  [1]: http://i.stack.imgur.com/zRBKQ.png



How can I create a &quot;tooltip tail&quot; using pure CSS?

Is it possible to make a capsule shape using border-radius without a set width or height?

I want the left and right sides to be completely rounded while the capsule would remain straight along it&#39;s horizontal length. Setting the radius to 50% doesn&#39;t seem to give the desired affect.

![Capsule Shape][1]


  [1]: http://i.stack.imgur.com/xptlK.gif

Capsule shape using border-radius without a set width or height?

How to ***draw*** the tick symbol using CSS? The symbols I find using [Unicode][1] isn&#39;t aesthetically-pleasing.

**EDIT**
Icon fonts are a great suggestion. I was looking for something like [this][2].


  [1]: https://en.wikipedia.org/wiki/Check_mark#Unicode
  [2]: http://fortawesome.github.io/Font-Awesome/icon/check-circle/

How to draw a checkmark / tick using CSS?

Is it possible to **cut out a hollow circle** using only *CSS*?

This we can all do:

![normal CSS circle][1]

But can we do this?

![transparent hollow circle in a div][2]


  [1]: http://i.stack.imgur.com/lpHn2.png
  [2]: http://i.stack.imgur.com/HzfP8.png


The **circle must be hollow and transparent**. Thus the problem is not solved by putting a solid color circle over a `div`.


Transparent hollow or cut out circle

Well, drawing a circle with pure CSS is easy.

    .circle {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: 3px solid black;
        background-color: green;
    }

How do I draw a sector? Given a degree X [0-360] I want to draw a X degrees sector.
Can I do that with pure CSS? 

For example:

![enter image description here][1]

**Thanks + Example**

Thank you Jonathan, I used the first method. If it helps someone here&#39;s an example of a JQuery function that gets percentage and draw a sector. The sector is behind the percentage circle and this example shows how to achieve an arc around a circle from a start degree.  

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(function drawSector() {
      var activeBorder = $(&quot;#activeBorder&quot;);
      var prec = activeBorder.children().children().text();
      if (prec &gt; 100)
        prec = 100;
      var deg = prec * 3.6;
      if (deg &lt;= 180) {
        activeBorder.css(&#39;background-image&#39;, &#39;linear-gradient(&#39; + (90 + deg) + &#39;deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)&#39;);
      } else {
        activeBorder.css(&#39;background-image&#39;, &#39;linear-gradient(&#39; + (deg - 90) + &#39;deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)&#39;);
      }

      var startDeg = $(&quot;#startDeg&quot;).attr(&quot;class&quot;);
      activeBorder.css(&#39;transform&#39;, &#39;rotate(&#39; + startDeg + &#39;deg)&#39;);
      $(&quot;#circle&quot;).css(&#39;transform&#39;, &#39;rotate(&#39; + (-startDeg) + &#39;deg)&#39;);
    });

&lt;!-- language: lang-css --&gt;

    .container {
      width: 110px;
      height: 110px;
      margin: 100px auto;
    }

    .prec {
      top: 30px;
      position: relative;
      font-size: 30px;
    }

    .prec:after {
      content: &#39;%&#39;;
    }

    .circle {
      position: relative;
      top: 5px;
      left: 5px;
      text-align: center;
      width: 100px;
      height: 100px;
      border-radius: 100%;
      background-color: #E6F4F7;
    }

    .active-border {
      position: relative;
      text-align: center;
      width: 110px;
      height: 110px;
      border-radius: 100%;
      background-color: #39B4CC;
      background-image: linear-gradient(91deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&quot;&gt;&lt;/script&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;div id=&quot;activeBorder&quot; class=&quot;active-border&quot;&gt;
        &lt;div id=&quot;circle&quot; class=&quot;circle&quot;&gt;
          &lt;span class=&quot;prec&quot;&gt;66&lt;/span&gt;
          &lt;span id=&quot;startDeg&quot; class=&quot;90&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

**[JSFiddle demo][2]**

    $(function drawSector() {
        // Get degrees
        ...
        // Draw a sector
        if (deg &lt;= 180) {
            activeBorder.css(&#39;background-image&#39;, &#39;linear-gradient(&#39; + (90+deg) + &#39;deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)&#39;);
        }
        else {
            activeBorder.css(&#39;background-image&#39;, &#39;linear-gradient(&#39; + (deg-90) + &#39;deg, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)&#39;);
        }

        // Rotate to meet the start degree
        activeBorder.css(&#39;transform&#39;,&#39;rotate(&#39; + startDeg + &#39;deg)&#39;);
    });

  [1]: http://i.stack.imgur.com/Lz1Wb.jpg
  [2]: http://jsfiddle.net/wun8T/1/

How to draw a circle sector in CSS?

So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I&#39;d prefer to just use CSS if possible.

Here&#39;s an idea of what I&#39;m trying to create:

![enter image description here][1]


Basically, I just need a way to create the hexagonal shapes, and then overlay text/images on top of them. I don&#39;t have much code yet, because I&#39;m not really sure where to start. The problem is, I could just use `&lt;div&gt;`s in the shape of a hexagon like shown in ([http://css-tricks.com/examples/ShapesOfCSS/][2]), but then they wouldn&#39;t be connecting. I could use a repeating hexagon pattern, but then I wouldn&#39;t be able to specify the exact location of the text or images I need in specific shapes. Thanks for any help in advance.


  [1]: http://i.stack.imgur.com/uXKx1.png
  [2]: http://css-tricks.com/examples/ShapesOfCSS/

Generate repeating hexagonal pattern with CSS3

I&#39;m wondering if it&#39;s possible in CSS to make a border but only for corner. Something like this: 

    ****                         ****
    *                               *
    *                               *

                 CONTENT

    *                               *
    *                               *
    ****                         ****

How can I show only corner borders?

Is it possible to reproduce this image using only CSS?

![enter image description here][1]

I want to apply this to my menu, so the brown background appears on `hover` instance

I don&#39;t know how to do this, I only have;

    .menu li a:hover{
         display:block;
         background:#1a0000;
         padding:6px 4px;
    }

  [1]: http://i.stack.imgur.com/rO9bJ.jpg

How to skew element but keep text normal (unskewed)

I&#39;m trying to create Apple&#39;s OS X circle loading animation.

![enter image description here][1]

What I have tried so far:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .animation-wrapper {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      filter: brightness(0.8);
      -webkit-filter: brightness(0.8);
    }
    .pie-piece1 {
      position: absolute;
      width: 50%;
      height: 50%;
      bottom: 0;
      left: 0;
      background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%);
    }
    .pie-piece2 {
      position: absolute;
      width: 50%;
      height: 50%;
      bottom: 0;
      right: 0;
      background: linear-gradient(to right, rgba(255, 255, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
    }
    .pie-piece3 {
      position: absolute;
      width: 50%;
      height: 50%;
      top: 0;
      left: 0;
      background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 255, 1) 100%);
    }
    .pie-piece4 {
      position: absolute;
      width: 50%;
      height: 50%;
      top: 0;
      right: 0;
      background: linear-gradient(to right, rgba(255, 0, 255, 1) 0%, rgba(0, 0, 255, 1) 100%);
    }
    .rotating-spinners {
      position: absolute;
    }
    .spike {
      fill: rgba(22, 22, 22, 0.5);
    }

&lt;!-- language: lang-html --&gt;

    &lt;figure class=&quot;animation-wrapper&quot;&gt;
      &lt;div class=&quot;pie-piece1&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;pie-piece2&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;pie-piece3&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;pie-piece4&quot;&gt;&lt;/div&gt;
      &lt;svg class=&quot;rotating-spinners&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 100 100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
        &lt;defs&gt;
          &lt;path id=&quot;spin-part&quot; class=&quot;spike&quot; d=&quot;M 65,-40 C 65,-40 80,20 50,50 60,40 50,-40 50,-40Z&quot; /&gt;
        &lt;/defs&gt;
        &lt;use x=&quot;0&quot; y=&quot;0&quot; xlink:href=&quot;#spin-part&quot; /&gt;
        &lt;use x=&quot;0&quot; y=&quot;0&quot; xlink:href=&quot;#spin-part&quot; transform=&quot;rotate(60, 50, 50)&quot; /&gt;
        &lt;use x=&quot;0&quot; y=&quot;0&quot; xlink:href=&quot;#spin-part&quot; transform=&quot;rotate(120, 50, 50)&quot; /&gt;
        &lt;use x=&quot;0&quot; y=&quot;0&quot; xlink:href=&quot;#spin-part&quot; transform=&quot;rotate(180, 50, 50)&quot; /&gt;
        &lt;use x=&quot;0&quot; y=&quot;0&quot; xlink:href=&quot;#spin-part&quot; transform=&quot;rotate(240, 50, 50)&quot; /&gt;
        &lt;use x=&quot;0&quot; y=&quot;0&quot; xlink:href=&quot;#spin-part&quot; transform=&quot;rotate(300, 50, 50)&quot; /&gt;
      &lt;/svg&gt;
    &lt;/figure&gt;

&lt;!-- end snippet --&gt;

The linear gradients don&#39;t seem to line up correctly since i couldn&#39;t find a way to make the gradients go in two directions.

Is there a way to create this using only CSS or SVG without mixing them like I have done?  

Or are there other solutions I can use like canvas or some kind of image magic?


  [1]: http://i.stack.imgur.com/wli95.gif

Circle loading animation

I&#39;m looking to &quot;cut&quot; the top left corner of a div, like if you had folded the corner of a page down.

I&#39;d like to do it in pure CSS, are there any methods?

Cut Corners using CSS

Like this

![circle around content][1]

With only this code

    &lt;span&gt;1&lt;/span&gt;


  [1]: http://i.stack.imgur.com/dnkPo.jpg

How to make a circle around content using CSS?

**tl;dr:** *I would like to create an actual 3d sphere with CSS - not just an illusion*

Note: some of the snippet examples are not responsive. Please use full screen. 


----------


With pure CSS you can **create and animate**  a 3d cube like so:



&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #cube-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1500px;
    }

    .cube {
      position: relative;
      transform-style: preserve-3d;
      animation-name: rotate;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
        ;
      }
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: solid green 3px;
    }

    #front_face {
      transform: translateX(-100px) translateY(-100px) translateZ(100px);
      background: rgba(255, 0, 0, 0.5);
    }

    #back_face {
      transform: translateX(-100px) translateY(-100px) translateZ(-100px);
      background: rgba(255, 0, 255, 0.5);
    }

    #right_face {
      transform: translateY(-100px) rotateY(90deg);
      background: rgba(255, 255, 0, 0.5);
    }

    #left_face {
      transform: translateY(-100px) translateX(-200px) rotateY(90deg);
      background: rgba(0, 255, 0, 0.5);
    }

    #top_face {
      transform: translateX(-100px) translateY(-200px) rotateX(90deg);
      background: rgba(0, 255, 255, 0.5);
    }

    #bottom_face {
      transform: translateX(-100px) rotateX(90deg);
      background: rgba(255, 255, 255, 0.5);
    }

    .cube {
      transform: rotateX(90deg) rotateY(90deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;cube-wrapper&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div id=&quot;front_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;back_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;top_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;bottom_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

**I want to create and animate a 3d sphere in the same manner.**

So... the first idea I get is to use `border-radius` and...well... it doesn&#39;t work. 




&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #cube-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1500px;
    }

    .cube {
      position: relative;
      transform-style: preserve-3d;
      animation-name: rotate;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
       
        ;
      }
    }


    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: solid green 3px;
      border-radius: 100vw
    }


     

    #front_face {
      transform: translateX(-100px) translateY(-100px) translateZ(100px);
      background: rgba(255, 0, 0, 0.5);
    }

    #back_face {
      transform: translateX(-100px) translateY(-100px) translateZ(-100px);
      background: rgba(255, 0, 255, 0.5);
    }

    #right_face {
      transform: translateY(-100px) rotateY(90deg);
      background: rgba(255, 255, 0, 0.5);
    }

    #left_face {
      transform: translateY(-100px) translateX(-200px) rotateY(90deg);
      background: rgba(0, 255, 0, 0.5);
    }

    #top_face {
      transform: translateX(-100px) translateY(-200px) rotateX(90deg);
      background: rgba(0, 255, 255, 0.5);
    }

    #bottom_face {
      transform: translateX(-100px) rotateX(90deg);
      background: rgba(255, 255, 255, 0.5);
    }

    .cube {
      transform: rotateX(90deg) rotateY(90deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;cube-wrapper&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div id=&quot;front_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;back_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;top_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;bottom_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


So, I reconsidered my approach and looked for a different method. 

I looked at:

 - https://stackoverflow.com/questions/29300573/implementing-pure-css-sphere-into-website-how-do-i-do-it
 - https://stackoverflow.com/questions/30891893/how-to-create-a-sphere-in-css
 - [Display an image wrapped around a sphere with CSS/Javascript
   ](https://stackoverflow.com/a/24561907/8157693)
 - [cssanimation.rocks - CSS spheres](https://cssanimation.rocks/spheres/)
 - [MDN -
   Circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
 

 

Then I tried again...the best I got were overly *complicated* 3d object **illusions**. 

Like this:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      overflow: hidden;
      background: #333;
    }

    .wrapper {
      margin: 1em;
      animation-duration: 20s;
    }

    .planet,
    .planet:before,
    .planet:after {
      height: 300px;
      width: 300px;
      border-radius: 100vw;
      will-change: transform;
      margin: 0 auto;
    }

    .planet {
      box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.4);
      position: relative;
    }

    .wrapper,
    .planet,
    .planet:before {
      animation-name: myrotate;
      animation-duration: 20s;
    }

    .wrapper,
    .planet,
    .planet:before,
    .planet:after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .planet:before,
    .planet:after {
      content: &#39;&#39;;
      position: absolute;
      top: 0;
      left: 0;
    }

    .planet:before {
      box-shadow: inset 20px 20px 100px 00px rgba(0, 0, 0, .5), 0px 0px 5px 3px rgba(0, 0, 0, .1);
    }

    .planet:after {
      filter: saturate(2.5);
      background: linear-gradient(rgba(0, 0, 0, 1), transparent), url(&quot;https://i.stack.imgur.com/eDYPN.jpg&quot;);
      opacity: 0.3;
      box-shadow: inset -20px -20px 14px 2px rgba(0, 0, 0, .2);
      animation-name: myopacity;
      animation-duration: 5000000s;
    }

    @keyframes myrotate {
      0% {
        transform: rotatez(0deg);
      }
      100% {
        transform: rotatez(360deg);
      }
    }

    @keyframes myopacity {
      0% {
        background-position: 0px;
        transform: rotatez(0deg);
      }
      50% {
        background-position: 100000000px;
      }
      100% {
        background-position: 0;
        transform: rotatez(-360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;planet&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

And this:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      background: #131418;
    }

    .wrapper {
      margin: 1em;
      max-width: 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .planet,
    .planet:before,
    .planet:after {
      height: 500px;
      width: 500px;
      max-height: 30vw;
      max-width: 30vw;
      border-radius: 100vw;
      will-change: transform;
    }

    .planet {
      box-shadow: inset 0px 0px 100px 10px rgba(0, 0, 0, .5);
      position: relative;
      float: left;
      margin: 0 2em;
    }

    .planet,
    .planet:before,
    .planet:after {
      animation-name: myrotate;
      animation-duration: 10s;
    }

    .wrapper,
    .planet,
    .planet:before,
    .planet:after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .planet:before,
    .planet:after {
      content: &#39;&#39;;
      position: absolute;
      top: 0;
      left: 0;
    }

    .planet:before {
      box-shadow: inset 50px 100px 50px 0 rgba(0, 0, 0, .5), 0 0 50px 3px rgba(0, 0, 0, .25);
      background-image: -webkit-radial-gradient( top, circle cover, #ffffff 0%, #000000 80%);
      opacity: .5;
    }

    .planet:after {
      opacity: .3;
      background-image: -webkit-radial-gradient( bottom, circle, #ffffff 0%, #000000 -200%);
      box-shadow: inset 0px 0px 100px 50px rgba(0, 0, 0, .5);
    }

    @keyframes myrotate {
      0% {
        transform: rotatez(0deg);
      }
      100% {
        transform: rotatez(-360deg);
      }
    }

    .bg {
      background: wheat;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;planet bg&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Which are okay until you try to actually rotate them on either the **x-axis** or the **y-axis** like the cube in my first example...here&#39;s what happens then: (simplified example)

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .sphere {
      background: black;
      width: 300px;
      height: 300px;
      border-radius: 100vw;
      animation: myrotate 10s linear infinite
    }

    @keyframes myrotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;sphere&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


All you get is a flat 2d object - which is expeceted considering that it&#39;s what the element is


----------


The closest thing I found is the following shape created in a [tutorial by Timo Korinth][1] 

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    @-webkit-keyframes animateWorld {
      0% {
        -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
      }
      50% {
        -webkit-transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg);
      }
      100% {
        -webkit-transform: rotateY(720deg) rotateX(360deg) rotateZ(360deg);
      }
    }

    html {
      background: #FFFFFF;
    }

    . world {
      -webkit-perspective: 1000px;
    }

    .cube {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 200px;
      height: 200px;
      -webkit-transform-style: preserve-3d;
      -webkit-animation-name: animateWorld;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
    }

    .circle {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px dashed #009BC2;
      border-radius: 50%;
      opacity: 0.8;
      background: rgba(255, 255, 255, 0);
    }

    .zero {
      -webkit-transform: rotateX(90deg);
    }

    .two {
      -webkit-transform: rotateY(45deg);
    }

    .three {
      -webkit-transform: rotateY(90deg);
    }

    .four {
      -webkit-transform: rotateY(135deg);
    }

    .five {
      width: 173px;
      height: 173px;
      margin: 14px;
      -webkit-transform: rotateX(90deg) translateZ(50px);
    }

    .six {
      width: 173px;
      height: 173px;
      margin: 14px;
      -webkit-transform: rotateX(90deg) translateZ(-50px);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;world&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div class=&quot;circle zero&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle one&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle two&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle three&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle four&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle five&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle six&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


----------


So here&#39;s my 

Question:
--------

**How do I create an actual 3 dimensional sphere with pure CSS? More specifically, one that is covered - not just a frame - and doesn&#39;t involve hundreds of html elements.** 


----------



**Notes:**  

 1. Three dimensional spheres have **height, width and depth** -  just
    like the cube in my first example snippet
 2. I don&#39;t need any physics and there&#39;s no need for any
    user-interaction. Just an animated spinning sphere.

----------


**Additional resources:**

 1. [paulrhayes.com - Spheres](https://paulrhayes.com/experiments/sphere/)
 2. [&lt;s&gt;3d&lt;/s&gt; (2d illusion) Earth with Rotating Animation with CSS][2]
 3. [Interactive CSS sphere][3]




  [1]: http://timokorinth.de/css-3d-sphere/
  [2]: http://w3bits.com/css-earth/
  [3]: http://robosparrow.github.io/Css3dSphere/


How can I create pure CSS 3-dimensional spheres?

I have a div for a preview box:

HTML:

    &lt;div class=&quot;preview-content&quot;&gt;PREVIEW&lt;/div&gt;

CSS:

    .preview-content {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
        width: 100%;
        min-height: 300px;
        max-height: 300px;
        line-height: 300px;
        text-align: center;
        vertical-align: middle;
         font-size: 2em;
    }



Question: how to add diagonal lines to div background like in the picture?
--

*note: with CSS only if possible*

![preview][1]

Thank you in advance.

  [1]: http://i.stack.imgur.com/zDYOQ.png

draw diagonal lines in div background with CSS

I&#39;m looking for a way of to do a cross-browser iphone-like badge in CSS3. I&#39;d obviously like to use one div for this, but alternative solutions would be fine. The important factor is that it needs to be horizontally and vertically centered in all browsers. 

An interesting design issue about these notifications is that they cannot have a specified width (height is fixed) - they should be able to handle [in ascii drawing] (1) and (1000), where (1000) is not a perfectly rounded circle, but instead looks more like a capsule.

**EDIT**: Additional constraints (from Steven):

 - No JavaScript
 - No mangling of the display property to table-cell, which is of questionable support status




Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

I am trying to get a wipe up animation to make a circle look like **it&#39;s filling with water**. I&#39;ve run into two errors, and haven&#39;t been able to even tackle the 3rd one:

 1. It fills up the wrong way
 2. &lt;strike&gt;It resets to empty (black) after it has filled&lt;/strike&gt; *
 3. For now, I am using the `&lt;img&gt;` tags, but I would like to move this effect to `body { background-image: }` and need some direction on how to do this.

[What I have tried so far:][1] 


&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #banner {
      width: 300px;
      height: 300px;
      position: relative;
    }
    #banner div {
      position: absolute;
    }
    #banner div:nth-child(2) {
      -webkit-animation: wipe 6s;
      -webkit-animation-delay: 0s;
      -webkit-animation-direction: up;
      -webkit-mask-size: 300px 3000px;
      -webkit-mask-position: 300px 300px;
      -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));
    }
    @-webkit-keyframes wipe {
      0% {
        -webkit-mask-position: 0 0;
      }
      100% {
        -webkit-mask-position: 300px 300px;
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;banner&quot;&gt;
      &lt;div&gt;
        &lt;img src=&quot;http://i.imgur.com/vklf6kK.png&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src=&quot;http://i.imgur.com/uszeRpk.png&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

---

Giving it a default mask position as [@anpsmn][2] suggested, doesn&#39;t reset it to black anymore.

  [1]: http://jsfiddle.net/um0rnL56/1/
  [2]: https://stackoverflow.com/users/473016/anpsmn

Filling water animation

![T-shirt with Flash symbol][1]


  [1]: http://i.stack.imgur.com/5K8oG.gif

I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the T-shirt worn by _Big Bang Theory_&#39;s Sheldon Cooper) in CSS.

This is going to act like a star rating system, only a &#39;lightning rating system&#39; instead.

However, since I&#39;m trying to keep the HTML to a minimum, I&#39;d like to style this in CSS only.

I have got to the stage of:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    html,
    body {
      margin: 0;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    }
    .wrap {
      height: 50vw;
      width: 50vw;
      position: relative;
      margin: 0 auto;
    }
    .circ:hover{
      background:gray;
      }
    .circ:hover .bolt{
      background:gold;
      }
    .circ {
      height: 50%;
      width: 50%;
      background: white;
      border: 5px solid black;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow:0 0 10px 2px black;
    }
    .bolt {
      position: absolute;
      top: 5%;
      left: 50%;
      height: 70%;
      width: 30%;
      background: yellow;
      border: 2px solid black;
      border-bottom: none;
      transform: perspective(200px) skewX(-10deg) rotateX(15deg);
    }
    .bolt:before {
      content: &quot;&quot;;
      position: absolute;
      top: 90%;
      left: 20%;
      height: 50%;
      width: 100%;
      background: inherit;
      border: 2px solid black;
      transform:  ;
    }
    /*
    .bolt:after{
      content:&quot;&quot;;
      position:absolute;
      top:-40%;left:20%;
      height:50%;
      width:100%;
      background:inherit;
      transform:perspective(50px) skewX(-10deg) rotateX(45deg);
      }*/

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js&quot;&gt;&lt;/script&gt;
    &lt;div class=&quot;wrap&quot;&gt;

      &lt;div class=&quot;circ&quot;&gt;

        &lt;div class=&quot;bolt&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

but do not know how to continue from here.

I&#39;ve attempted using the `perspective` property, although I don&#39;t think I&#39;ve quite got a handle on it as of yet - mainly because I&#39;m slightly confused as to what it is doing to the `:before` and `:after` properties when it is applied to the parent.

I have chosen CSS for this as the white background and bolt colour will be changing on click, and because I know how to do that with CSS.

(I know SVG may be a better option here, but I have not been able to learn this due to time restrictions, so I&#39;d prefer to use &#39;what I know how to use&#39;, which is, CSS)

Create a lightning bolt design (like The Flash)

I&#39;ve got a div that looks like a orange square

![enter image description here][1]

I&#39;d like to draw a white X in this div somehow so that it looks more like

![enter image description here][2]

Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background? The div code just looks like

    div {
        height: 100px;
        width: 100px;
        background-color: #FA6900;
        border-radius: 5px;
    }



  [1]: http://i.stack.imgur.com/Ysi2A.png
  [2]: http://i.stack.imgur.com/Tfu0A.png

Draw an X in CSS

I&#39;ve used `border-radius: 50%` or `border-radius: 999em`, but the problem is the same: with squared images there&#39;s no problem, but with rectangular images I obtain an oval circle. I&#39;m also disposed to crop a part of the image (obviously). Is there&#39;s a way to do that with pure CSS (or at least JavaScript / jQuery), without using a `&lt;div&gt;` with a `background-image`, but only using the `&lt;img&gt;` tag?

How to make rectangular image appear circular with CSS

I am trying to have a triangle/arrow at the bottom of my hero but it is not responsive and doesn&#39;t work on mobile very well as the triangle floats off to the right and is not absolutely centered anymore.


How could I keep the triangle positioned in the absolute center at the bottom of the div at all times?

Example code here:

http://jsfiddle.net/SxKr5/1/

HTML:

    &lt;div class=&quot;hero&quot;&gt;&lt;/div&gt;


CSS:

    .hero { 	
    	position:relative;
    	background-color:#e15915;
    	height:320px !important;
    	width:100% !important;
    
    
    }
    
    
    .hero:after,
    .hero:after {
    	z-index: -1;
    	position: absolute;
        top: 98.1%;
        left: 70%;
        margin-left: -25%;
        content: &#39;&#39;;
        width: 0;
        height: 0;
        border-top: solid 50px #e15915;
        border-left: solid 50px transparent;
        border-right: solid 50px transparent;
    }





Center Triangle at Bottom of Div

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%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
      -moz-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%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
    }

**HTML**

    &lt;div class=&quot;poligon&quot;&gt;
      &lt;img src=&quot;http://lorempixel.com/g/600/400/&quot;&gt;
    &lt;/div&gt;


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

I&#39;m looking to create this overlapping circles shape in CSS:

![Desired overlapping cicles shape][1]


  [1]: http://i.stack.imgur.com/TFlHf.png

Basically, just stacked circles. I&#39;ve looked around, and all solutions I see include using multiple div elements for this effect. However, can&#39;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&#39;d have a pill shape like this:

http://jsfiddle.net/5wytm0r4/

   

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

     #circles {
       background-color: red;
       width: 130px;
       height: 100px;
       border-radius: 50px;
     }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;circles&quot;&gt;&lt;/div&gt;


&lt;!-- end snippet --&gt;

And then simply draw a couple of quarter moons in it, and you&#39;re done. However, I can&#39;t figure out how to draw these moon shapes in my capsule shaped div.

Overlapping circles in CSS with 1 div

Creating a DIV that uses CSS to draw a triangle to the left.  Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code.

Is this possible? Or am I better off using border-image for this?

(Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: Desired Result)

![Elements Before Box-Shadow is added][1]


![Elements with box-shadow added][2]


![The desired result][3]


  [1]: http://i.stack.imgur.com/yzBQj.png
  [2]: http://i.stack.imgur.com/VEfqf.png
  [3]: http://i.stack.imgur.com/9agvu.png

    .bubble{
		height: 200px;
		width:  275px;
		
		opacity: 0;
		
		margin-top: 41px;
	
		float: right;
		
		background-color: #F2F2F2;
		
		-webkit-border-radius: 5px;
		-webkit-box-shadow: 0px 0px 6px #B2B2B2;
	}

    .bubble::after {
			height: 0px;
			width:  0px;
			
			content: &quot;\00a0&quot;;
			
			display: block;
			
			margin-left: -10px;
			margin-top:   28px;

			border-width: 10px 10px 10px 0;
			border-style: solid;
			border-color: transparent #F2F2F2 transparent transparent;
			
			-webkit-box-shadow: 0px 0px 6px #B2B2B2;
		}

CSS Speech Bubble with Box Shadow

I&#39;d like to achieve a custom-colored shape like this using no Javascript:
![3 corner rounded triangle][1]

Currently I&#39;m overlaying an image of the &#39;frame&#39; over an orange rectangular div, but this is pretty hacky.
I suppose I could use a dynamically generated canvas element, but that not only requires JS, but HTML5 canvas support. Any ideas?

  [1]: http://i.stack.imgur.com/YDY9e.png

How to make 3-corner-rounded triangle in CSS

I want to create shape like on this picture:

![shape][1]


  [1]: http://i.stack.imgur.com/nUh7G.png

I created triangle shape like on this pic, and set the margins to be in top right angle, but I don&#39;t know how to make it look divided from the left div like shown on picture. 

Do I have to &quot;cut&quot; left div to remain its grey border and to look divided from green triangle?

Is there any idea how to do this? 

EDIT:

 1. I am using fixed navigation bar on page, so when I scroll if div is `position:absolute`, navigation bar goes behind div.
 2. Space between green triangle and rest of div should be transparent, because I am using image as page background.


How to create triangle shape in the top-right angle of another div to look divided by border

I would like to make a **transparent arrow over an image**. This triangle should be indented in a semi transparent block and show the background image.

Desired output:

![transparent indented CSS triangle][1]


&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .barShow {
      background-color: #000;
      opacity: 0.5;
    }

    .barShow:before {
      top: 0%;
      left: 50%;
      border: solid transparent;
      content: &quot; &quot;;
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-top-color: #999;
      border-width: 20px;
      margin-left: -20px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;barShow&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

The **transparent CSS Arrow** should be transparent without color.


  [1]: https://i.stack.imgur.com/Yn7EK.jpg

All Css Shapes Solutions on Gang of Coders

Total of 44 Css Shapes Solutions