# Tổng hợp những css đẹp để làm trang trí (ok)

{% embed url="https://www.paulund.co.uk/how-to-create-different-shapes-in-css" %}

## How To Create Different Shapes In CSS

[![ads via Carbon](https://cdn4.buysellads.net/uu/1/92564/1622721464-bsa-carbon.png)](https://srv.carbonads.net/ads/click/x/GTND42JLCKSIV27LF6ALYKQNCVBD423ECY7ICZ3JCY7DVKQYCVYDL53KC6YD523ICEYD653WCABDCK3ICAAI4KQKC6SD6K7UCVSDTK3EHJNCLSIZ?segment=placement:paulundcouk;)[We're hiring! Help make Carbon Ads the premier ad network for the dev and creator community.](https://srv.carbonads.net/ads/click/x/GTND42JLCKSIV27LF6ALYKQNCVBD423ECY7ICZ3JCY7DVKQYCVYDL53KC6YD523ICEYD653WCABDCK3ICAAI4KQKC6SD6K7UCVSDTK3EHJNCLSIZ?segment=placement:paulundcouk;)[ADS VIA CARBON](http://carbonads.net/?utm_source=paulundcouk\&utm_medium=ad_via_link\&utm_campaign=in_unit\&utm_term=carbon)

![Shapes](http://www.paulund.co.uk/uploads/2011/08/1311967716_shapes.png) While I was crawling around the internet I found this useful post from the land of the web about using CSS3 to create some simple shapes. [You can see the cheat sheet here](http://www.land-of-web.com/freebies/css3-simple-shapes-cheat-sheet.html). I started using this cheat sheet to create some shapes for web pages. But the problem with using a cheat sheet is that you have to go back and type in the CSS each time, so I create this page to easily copy and paste the CSS so I can correct the shapes easily.

![](https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsqgAqbSGjkO0e50FMT%2F-McD5T7K6BPNtnrljI-X%2F-McD5vqU5vlxbuWCAWDo%2FScreenshot_1.png?alt=media\&token=307cb5fe-19ab-4095-a041-6eabf5de1b9b)

### CSS Square

```

.square{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
}
```

### CSS Square Border

```

.square-border{
     width:100px; 
     height:100px; 
     border:5px solid yellow; 
     background: #FFF;
}
```

### CSS Parallelogram

```

.parallelogram{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
     transform: skew(20deg); 
     -webkit-transform: skew(20deg);
}
```

### CSS Parallelogram Right

```

.parallelogramRight{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
     transform: skew(-20deg); 
     -webkit-transform: skew(-20deg);
}
```

### CSS Diamond

```

.diamond{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
    margin:3px 0 0 30px;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transform-origin: 0 100%;
     transform-origin: 0 100%;
}
```

### CSS Rectangle

```

.rectangle{
     width:100px; 
     height:60px; 
     border:1px solid #000; 
     background:yellow;
}
```

### CSS Trapez

```

.trapez{
     width:100px; 
     height:0; 
     border-bottom:100px solid blue;
     border-left:60px solid transparent;
     border-right:60px solid transparent; 
}
```

### CSS Trapez 2

```

.trapez2{
     width:100px; 
     height:0; 
     border-top:100px solid blue;
     border-left:60px solid transparent;
     border-right:60px solid transparent; 
}
```

### CSS Trapez 3

```

.trapez3{
     width:0; 
     height:100px; 
     border-right:100px solid blue;
     border-top:60px solid transparent;
     border-bottom:60px solid transparent; 
}
```

### CSS Trapez 4

```

.trapez4{
     width:0; 
     height:100px; 
     border-left:100px solid blue;
     border-top:60px solid transparent;
     border-bottom:60px solid transparent; 
}
```

### CSS Triangle

```

.triangle{
     width:0; 
     height:0; 
     border-bottom:100px solid red;
     border-left:50px solid transparent;
     border-right:50px solid transparent; 
}
```

### CSS Triangle Right

```

.triangleRight{
     width:0; 
     height:0; 
     border-left:100px solid red;
     border-top:50px solid transparent;
     border-bottom:50px solid transparent; 
}
```

### CSS Triangle Down

```

.triangleDown{
     width:0; 
     height:0; 
     border-top:100px solid red;
     border-left:50px solid transparent;
     border-right:50px solid transparent; 
}
```

### CSS Triangle Left

```

.triangleLeft{
     width:0; 
     height:0; 
     border-right:100px solid red;
     border-top:50px solid transparent;
     border-bottom:50px solid transparent; 
}
```

### CSS Half Circle

```

.halfCircle{
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     background:green;
}
```

### CSS Half Circle Right

```

.halfCircleRight{
     height:90px;
     width:45px;
     border-radius: 0 90px 90px 0;
     background:green;
}
```

### CSS Half Circle Left

```

.halfCircleLeft{
     height:90px;
     width:45px;
     border-radius: 90px 0 0 90px;
     background:green;
}
```

### CSS Half Circle Bottom

```

.halfCircleBottom{
     height:45px;
     width:90px;
     border-radius: 0 0 90px 90px;
     background:green;
}
```

### CSS Circle

```

.circle{
     height:45px;
     width:45px;
     border-radius: 45px;
     background:green;
}
```

### CSS Oval

```

.oval{
     height:45px;
     width:180px;
     border-radius: 90px / 45px;
     background:green;
}
```

### CSS Quarter Circle Top Left

```

.quarterCircleTopLeft{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background: orange;
     border-radius: 90px 0 0 0;
}
```

### CSS Quarter Circle Top Right

```

.quarterCircleTopRight{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background: orange;
     border-radius: 0 90px 0 0;
}
```

### CSS Quarter Circle Bottom Left

```

.quarterCircleBottomLeft{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background: orange;
     border-radius: 0 0 90px 0;
}
```

### CSS Quarter Circle Bottom Right

```

.quarterCircleBottomRight{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background: orange;
     border-radius: 0 0 0 90px;
}
```

### CSS Chart Top

```

.chartTop{
     width:0;
     height:0;
     border-right:60px solid purple;
     border-top:60px solid transparent;
     border-left:60px solid purple;
     border-bottom:60px solid purple;
     border-radius: 60px;
}
```

### CSS Chart Right

```

.chartRight{
     width:0;
     height:0;
     border-right:60px solid transparent;
     border-top:60px solid purple;
     border-left:60px solid purple;
     border-bottom:60px solid purple;
     border-radius: 60px;
}
```

### CSS Chart Bottom

```

.chartBottom{
     width:0;
     height:0;
     border-right:60px solid purple;
     border-top:60px solid purple;
     border-left:60px solid purple;
     border-bottom:60px solid transparent;
     border-radius: 60px;
}
```

### CSS Chart Left

```

.chartLeft{
     width:0;
     height:0;
     border-right:60px solid purple;
     border-top:60px solid purple;
     border-left:60px solid transparent;
     border-bottom:60px solid purple;
     border-radius: 60px;
}
```

### CSS Triangle Top Left

```

.triangleTopLeft{
     width:0; 
     height:0; 
     border-right:50px solid transparent;
     border-top:50px solid red;
     border-left:50px solid red;
     border-bottom:50px solid transparent;
}
```

### CSS Triangle Top Right

```

.triangleTopRight{
     width:0; 
     height:0; 
     border-right:50px solid red;
     border-top:50px solid red;
     border-left:50px solid transparent;
     border-bottom:50px solid transparent;
}
```

### CSS Triangle Bottom Left

```

.triangleBottomLeft{
     width:0; 
     height:0; 
     border-right:50px solid transparent;
     border-top:50px solid transparent;
     border-left:50px solid red;
     border-bottom:50px solid red;
}
```

### CSS Triangle Bottom Right

```

.triangleBottomRight{
     width:0; 
     height:0; 
     border-right:50px solid red;
     border-top:50px solid transparent;
     border-left:50px solid transparent;
     border-bottom:50px solid red;
}
```

### CSS Bookmark Ribbon

```

.bookmarkRibbon{
     width:0; 
     height:100px; 
     border-right:50px solid blue;
     border-left:50px solid blue;
     border-bottom:30px solid transparent;
}
```

### CSS Shapes Generator

Learn how these are created by using the CSS Shapes Generator from Coveloping. [CSS Shapes Generator](http://coveloping.com/tools/css-shapes-generator)

![](https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsqgAqbSGjkO0e50FMT%2F-McD5T7K6BPNtnrljI-X%2F-McD6M1Qd3xuWtQCdlif%2FScreenshot_2.png?alt=media\&token=e61ac084-0de9-41eb-b64b-4214c6c305c9)

{% embed url="https://www.freecodecamp.org/news/css-shapes-explained-how-to-draw-a-circle-triangle-and-more-using-pure-css/" %}

## CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using Pure CSS

![Thomas Weibenfalk](https://www.freecodecamp.org/news/content/images/size/w100/2019/08/mToHENLC_400x400.jpg)[Thomas Weibenfalk](https://www.freecodecamp.org/news/author/thomas-weibenfalk/)![CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using Pure CSS](https://www.freecodecamp.org/news/content/images/size/w2000/2020/01/delila-ziebart-b0GSCFJ-Gzg-unsplash.jpg)

Before we start. If you want more free content but in video format. Don't miss out on my Youtube channel where I publish weekly videos on FrontEnd coding.\
\
[https://www.youtube.com/user/Weibenfalk](https://www.youtube.com/user/Weibenfalk)\
\
\----------\
\
Are you new to web development and CSS? Have you ever wondered how those nice shapes are made that you see all over the internet? Wonder no more. You've come to the right place.

Below I will explain the very basics of creating shapes with CSS. There's **a lot** to tell you about this topic! Therefore I will not cover all (far from all) tools and shapes but this should give you a basic idea of how shapes are created with CSS.

Some shapes require more "fix and tricks" than others. Creating shapes with CSS is usually a combination of using **width, height, top, right, left, border, bottom, transform** and pseudo-elements like **:before** and **:after.** We also have more modern CSS properties to create shapes with like **shape-outside** and **clip-path.** I'll write about them below also.

### **CSS Shapes - The basic way** <a href="#css-shapes-the-basic-way" id="css-shapes-the-basic-way"></a>

By using a few tricks in CSS we've always been able to create basic shapes like square&#x73;_,_ circle&#x73;_,_ and triangles with regular CSS properties. Let's look at a few of them now.

#### Squares and rectangles <a href="#squares-and-rectangles" id="squares-and-rectangles"></a>

Squares and rectangles are probably the easiest shapes to achieve. By default, a div is always a square or a rectangle.

You set the width and height as shown in the below code. Then it's just a matter of giving the element a background color. You can have whatever other properties you want on the element.\


```
#square {
    background: lightblue;
    width: 100px;
    height: 100px;
}
```

![](https://www.freecodecamp.org/news/content/images/2020/01/square.png)A CSS square

#### &#x20;Circles <a href="#circles" id="circles"></a>

It's almost as easy to create a circle. To create a circle we can set the border-radius on the element. This will create curved corners on the element.

If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.

```
#circle {
    background: lightblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
```

![](https://www.freecodecamp.org/news/content/images/2020/01/circle.png)A CSS Circle

#### Triangles <a href="#triangles" id="triangles"></a>

Triangles are a little trickier. We have to set the borders on the element to match a triangle. By setting the width and height to zero on the element, the actual width of the element is going to be the width of the border.

Keep in mind that the border edges on an element are 45 degree diagonals to each other. That's why this method works to create a triangle. By setting one of the borders to a solid color and the other borders to transparent it will take the form of a triangle.![](https://www.freecodecamp.org/news/content/images/2020/01/borders.png)CSS Borders have angled edges

```
#triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid lightblue;
}
```

![](https://www.freecodecamp.org/news/content/images/2020/01/triangle.png)A CSS Triangle

If you want to have a triangle/arrow pointing in another direction You can change the border values corresponding to what side you want to be visible. Or you can rotate the element with the _transform_ property if you want to be really fancy.

```
 #triangle {
     width: 0;
     height: 0;
     border-top: 40px solid transparent;
     border-right: 80px solid lightblue;
     border-bottom: 40px solid transparent;
 }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/triangle2.png)Another CSS Triangle

Alright – that's an intro to basic shapes with CSS. There are probably an endless amount of shapes you can think of to create. These are just the fundamentals, but with a little creativity and determination you can achieve a lot with just basic CSS properties.

In some cases, with more advanced shapes, it's also a good idea to use the :after and :before pseudo selectors. This is out of scope of this article though as my intention is to cover the basics to get you going.

#### Disadvantage <a href="#disadvantage" id="disadvantage"></a>

**There is one big disadvantage with the above approach.** For example, if you want your text to flow around and wrap your shape. A regular HTML div with background and borders to make up the shape won't allow that. The text will not adapt and flow around your shape. Instead it will flow around the div itself (which is a square or a rectangle).

Below is an illustration showing the triangle and how the text will flow.![](https://www.freecodecamp.org/news/content/images/2020/01/textflow-bad.png)

Luckily we have some modern CSS properties to use instead.

### CSS Shapes - The other way <a href="#css-shapes-the-other-way" id="css-shapes-the-other-way"></a>

Nowadays we have a property called **shape-outside** to use in CSS. This property lets you define a shape that the text will wrap/flow around.

Along with this property we have some basic shapes:\
\
**inset()**\
**circle()**\
**ellipse()**\
**polygon()**

**Here's a tip**: You can also use the **clip-path** property. You can create your shape with that in the same way, but it won't let the text wrap around your shape like shape-outside does.

The element that we are going to apply the shape to with the shape-outside property to has to be floated. It also has to have a defined width and height. **That's really important to know!**

You can read more about why [here](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside). Below is also a text that I've taken from the provided link to developer.mozilla.org.

> The `shape-outside` property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.

#### inset() <a href="#inset" id="inset"></a>

The inset() type can be used to create a rectangle/square with an optional offset for the wrapping text. It allows you to provide values on how much you want your wrapping text to overlap the shape.

You can specify the offset to be the same for all four directions like this: **inset(20px).** Or it can be individually set for each direction: **inset(20px 5px 30px 10px)**.

You can use other units also to set the offset, for example, percent. The values correspond like this: **inset(top right bottom left)**_**.**_

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

```
 #square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px);
     background: lightblue;
 }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/inset.png)The text is offset by the specified values. In this case 20px at top, 5px to the right, 30px at the bottom and 10 px to the left

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

```
 #square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px round 50px);
     background: lightblue;
 }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/inset2.png)border-radius set to 50px on the inset

#### circle() <a href="#circle" id="circle"></a>

In this one a circle is created using the **shape-outside** property. You also have to apply a **clip-path** with the corresponding property for the circle to show up.

The **clip-path** property can take the same value as the shape-outside property so we can give it the standard **circle()** shape that we used for **shape-outside**. Also, note that I've applied a 20px margin on the element here to give the text some space.

```
#circle {
    float: left;
    width: 300px;
    height: 300px;
    margin: 20px;
    shape-outside: circle();
    clip-path: circle();
    background: lightblue;
}
```

![](https://www.freecodecamp.org/news/content/images/2020/01/circle-shape-margin-1.png)Text flows around the shape!

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

```
 #circle {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: circle(50% at 30%);
      clip-path: circle(50% at 0%);
      background: lightblue;
    }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/circle2.png)

#### ellipse() <a href="#ellipse" id="ellipse"></a>

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: **ellipse(25px  50px).**

The same as a circle, it also takes a position value as the last value.

```
   #ellipse {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: ellipse(20% 50%);
      clip-path: ellipse(20% 50%);
      background: lightblue;
    }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/ellipse.png)

#### polygon() <a href="#polygon" id="polygon"></a>

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

```
#polygon {
      float: left;
      width: 150px;
      height: 150px;
      margin: 0 20px;
      shape-outside: polygon(
        0 0,
        100% 0,
        100% 20%,
        60% 20%,
        60% 100%,
        40% 100%,
        40% 20%,
        0 20%
      );
      clip-path: polygon(
        0 0,
        100% 0,
        100% 20%,
        60% 20%,
        60% 100%,
        40% 100%,
        40% 20%,
        0 20%
      );
      background: lightblue;
    }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/polygon_t.png)

#### Images <a href="#images" id="images"></a>

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a .png image with a transparent background.![](https://www.freecodecamp.org/news/content/images/2020/01/moon.png)

```
<img src="src/moon.png" id="moon" />
```

```
#moon {
      float: left;
      width: 150px;
      height: 150px;
      shape-outside: url("./src/moon.png");
    }
```

![](https://www.freecodecamp.org/news/content/images/2020/01/moon2.png)

And that's it! Thank you for reading.

![](https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsqgAqbSGjkO0e50FMT%2F-McD5T7K6BPNtnrljI-X%2F-McD6aeWKc8yab6s5ZsR%2FScreenshot_3.png?alt=media\&token=18bce427-869a-4341-9686-b2a4e0d60b40)

## The Shapes of CSS

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.

### Square

\
\#square {\
&#x9;width: 100px;\
&#x9;height: 100px;\
&#x9;background: red;\
}\
&#x9;			&#x9;

### Rectangle

\
\#rectangle {\
&#x9;width: 200px;\
&#x9;height: 100px;\
&#x9;background: red;\
}\
&#x9;			&#x9;

### Circle

\
\#circle {\
&#x9;width: 100px;\
&#x9;height: 100px;\
&#x9;background: red;\
&#x9;-moz-border-radius: 50px;\
&#x9;-webkit-border-radius: 50px;\
&#x9;border-radius: 50px;\
}\
\
/\* Cleaner, but slightly less support: use "50%" as value \*/\
&#x9;			&#x9;

### Oval

\
\#oval {\
&#x9;width: 200px;\
&#x9;height: 100px;\
&#x9;background: red;\
&#x9;-moz-border-radius: 100px / 50px;\
&#x9;-webkit-border-radius: 100px / 50px;\
&#x9;border-radius: 100px / 50px;\
}\
\
/\* Cleaner, but slightly less support: use "50%" as value \*/\
&#x9;			&#x9;

### Triangle Up

\
\#triangle-up {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;border-bottom: 100px solid red;\
}\
&#x9;			&#x9;

### Triangle Down

\
\#triangle-down {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;border-top: 100px solid red;\
}\
&#x9;			&#x9;

### Triangle Left

\
\#triangle-left {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-top: 50px solid transparent;\
&#x9;border-right: 100px solid red;\
&#x9;border-bottom: 50px solid transparent;\
}\
&#x9;			&#x9;

### Triangle Right

\
\#triangle-right {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-top: 50px solid transparent;\
&#x9;border-left: 100px solid red;\
&#x9;border-bottom: 50px solid transparent;\
}\
&#x9;			&#x9;

### Triangle Top Left

\
\#triangle-topleft {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-top: 100px solid red;\
&#x9;border-right: 100px solid transparent;\
}\
&#x9;			&#x9;

### Triangle Top Right

\
\#triangle-topright {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-top: 100px solid red;\
&#x9;border-left: 100px solid transparent;\
\
}\
&#x9;		&#x9;

### Triangle Bottom Left

\
\#triangle-bottomleft {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-bottom: 100px solid red;\
&#x9;border-right: 100px solid transparent;\
}\
&#x9;			&#x9;

### Triangle Bottom Right

\
\#triangle-bottomright {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-bottom: 100px solid red;\
&#x9;border-left: 100px solid transparent;\
}\
&#x9;			&#x9;

### Curved Tail Arrow[via Ando Razafimandimby](http://about.me/fwd)

\
\#curvedarrow {\
&#x20; position: relative;\
&#x20; width: 0;\
&#x20; height: 0;\
&#x20; border-top: 9px solid transparent;\
&#x20; border-right: 9px solid red;\
&#x20; -webkit-transform: rotate(10deg);\
&#x20; -moz-transform: rotate(10deg);\
&#x20; -ms-transform: rotate(10deg);\
&#x20; -o-transform: rotate(10deg);\
}\
\#curvedarrow:after {\
&#x20; content: "";\
&#x20; position: absolute;\
&#x20; border: 0 solid transparent;\
&#x20; border-top: 3px solid red;\
&#x20; border-radius: 20px 0 0 0;\
&#x20; top: -12px;\
&#x20; left: -9px;\
&#x20; width: 12px;\
&#x20; height: 12px;\
&#x20; -webkit-transform: rotate(45deg);\
&#x20; -moz-transform: rotate(45deg);\
&#x20; -ms-transform: rotate(45deg);\
&#x20; -o-transform: rotate(45deg);\
}\
&#x9;			&#x9;

### Trapezoid

\
\#trapezoid {\
&#x9;border-bottom: 100px solid red;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;height: 0;\
&#x9;width: 100px;\
}\
&#x9;			&#x9;

### Parallelogram

\
\#parallelogram {\
&#x9;width: 150px;\
&#x9;height: 100px;\
&#x9;-webkit-transform: skew(20deg);\
&#x9;   -moz-transform: skew(20deg);\
&#x9;     -o-transform: skew(20deg);\
&#x9;background: red;\
}\
&#x9;			&#x9;

### Star (6-points)

\
\#star-six {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;border-bottom: 100px solid red;\
&#x9;position: relative;\
}\
\#star-six:after {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;border-top: 100px solid red;\
&#x9;position: absolute;\
&#x9;content: "";\
&#x9;top: 30px;\
&#x9;left: -50px;\
}\
&#x9;			&#x9;

### Star (5-points)[via Kit MacAllister](http://kitmacallister.com/2011/css-only-5-point-star/)

\
\#star-five {\
&#x20;  margin: 50px 0;\
&#x20;  position: relative;\
&#x20;  display: block;\
&#x20;  color: red;\
&#x20;  width: 0px;\
&#x20;  height: 0px;\
&#x20;  border-right:  100px solid transparent;\
&#x20;  border-bottom: 70px  solid red;\
&#x20;  border-left:   100px solid transparent;\
&#x20;  -moz-transform:    rotate(35deg);\
&#x20;  -webkit-transform: rotate(35deg);\
&#x20;  -ms-transform:     rotate(35deg);\
&#x20;  -o-transform:      rotate(35deg);\
}\
\#star-five:before {\
&#x20;  border-bottom: 80px solid red;\
&#x20;  border-left: 30px solid transparent;\
&#x20;  border-right: 30px solid transparent;\
&#x20;  position: absolute;\
&#x20;  height: 0;\
&#x20;  width: 0;\
&#x20;  top: -45px;\
&#x20;  left: -65px;\
&#x20;  display: block;\
&#x20;  content: '';\
&#x20;  -webkit-transform: rotate(-35deg);\
&#x20;  -moz-transform:    rotate(-35deg);\
&#x20;  -ms-transform:     rotate(-35deg);\
&#x20;  -o-transform:      rotate(-35deg);\
\
}\
\#star-five:after {\
&#x20;  position: absolute;\
&#x20;  display: block;\
&#x20;  color: red;\
&#x20;  top: 3px;\
&#x20;  left: -105px;\
&#x20;  width: 0px;\
&#x20;  height: 0px;\
&#x20;  border-right: 100px solid transparent;\
&#x20;  border-bottom: 70px solid red;\
&#x20;  border-left: 100px solid transparent;\
&#x20;  -webkit-transform: rotate(-70deg);\
&#x20;  -moz-transform:    rotate(-70deg);\
&#x20;  -ms-transform:     rotate(-70deg);\
&#x20;  -o-transform:      rotate(-70deg);\
&#x20;  content: '';\
}\
&#x9;			&#x9;

### Pentagon

\
\#pentagon {\
&#x20;   position: relative;\
&#x20;   width: 54px;\
&#x20;   border-width: 50px 18px 0;\
&#x20;   border-style: solid;\
&#x20;   border-color: red transparent;\
}\
\#pentagon:before {\
&#x20;   content: "";\
&#x20;   position: absolute;\
&#x20;   height: 0;\
&#x20;   width: 0;\
&#x20;   top: -85px;\
&#x20;   left: -18px;\
&#x20;   border-width: 0 45px 35px;\
&#x20;   border-style: solid;\
&#x20;   border-color: transparent transparent red;\
}\
&#x9;			&#x9;

### Hexagon

\
\#hexagon {\
&#x9;width: 100px;\
&#x9;height: 55px;\
&#x9;background: red;\
&#x9;position: relative;\
}\
\#hexagon:before {\
&#x9;content: "";\
&#x9;position: absolute;\
&#x9;top: -25px;\
&#x9;left: 0;\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;border-bottom: 25px solid red;\
}\
\#hexagon:after {\
&#x9;content: "";\
&#x9;position: absolute;\
&#x9;bottom: -25px;\
&#x9;left: 0;\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border-left: 50px solid transparent;\
&#x9;border-right: 50px solid transparent;\
&#x9;border-top: 25px solid red;\
}\
&#x9;			&#x9;

### Octagon

\
\#octagon {\
&#x9;width: 100px;\
&#x9;height: 100px;\
&#x9;background: red;\
&#x9;position: relative;\
}\
\
\#octagon:before {\
&#x9;content: "";\
&#x9;position: absolute;\
&#x9;top: 0;\
&#x9;left: 0;\
&#x9;border-bottom: 29px solid red;\
&#x9;border-left: 29px solid #eee;\
&#x9;border-right: 29px solid #eee;\
&#x9;width: 42px;\
&#x9;height: 0;\
}\
\
\#octagon:after {\
&#x9;content: "";\
&#x9;position: absolute;\
&#x9;bottom: 0;\
&#x9;left: 0;\
&#x9;border-top: 29px solid red;\
&#x9;border-left: 29px solid #eee;\
&#x9;border-right: 29px solid #eee;\
&#x9;width: 42px;\
&#x9;height: 0;\
}\
&#x9;			&#x9;

### Heart[via Nicolas Gallagher](http://nicolasgallagher.com/)

\
\#heart {\
&#x20;   position: relative;\
&#x20;   width: 100px;\
&#x20;   height: 90px;\
}\
\#heart:before,\
\#heart:after {\
&#x20;   position: absolute;\
&#x20;   content: "";\
&#x20;   left: 50px;\
&#x20;   top: 0;\
&#x20;   width: 50px;\
&#x20;   height: 80px;\
&#x20;   background: red;\
&#x20;   -moz-border-radius: 50px 50px 0 0;\
&#x20;   border-radius: 50px 50px 0 0;\
&#x20;   -webkit-transform: rotate(-45deg);\
&#x20;      -moz-transform: rotate(-45deg);\
&#x20;       -ms-transform: rotate(-45deg);\
&#x20;        -o-transform: rotate(-45deg);\
&#x20;           transform: rotate(-45deg);\
&#x20;   -webkit-transform-origin: 0 100%;\
&#x20;      -moz-transform-origin: 0 100%;\
&#x20;       -ms-transform-origin: 0 100%;\
&#x20;        -o-transform-origin: 0 100%;\
&#x20;           transform-origin: 0 100%;\
}\
\#heart:after {\
&#x20;   left: 0;\
&#x20;   -webkit-transform: rotate(45deg);\
&#x20;      -moz-transform: rotate(45deg);\
&#x20;       -ms-transform: rotate(45deg);\
&#x20;        -o-transform: rotate(45deg);\
&#x20;           transform: rotate(45deg);\
&#x20;   -webkit-transform-origin: 100% 100%;\
&#x20;      -moz-transform-origin: 100% 100%;\
&#x20;       -ms-transform-origin: 100% 100%;\
&#x20;        -o-transform-origin: 100% 100%;\
&#x20;           transform-origin :100% 100%;\
}\
&#x9;			&#x9;

### Infinity[via Nicolas Gallagher](http://nicolasgallagher.com/)

\
\#infinity {\
&#x20;   position: relative;\
&#x20;   width: 212px;\
&#x20;   height: 100px;\
}\
\
\#infinity:before,\
\#infinity:after {\
&#x20;   content: "";\
&#x20;   position: absolute;\
&#x20;   top: 0;\
&#x20;   left: 0;\
&#x20;   width: 60px;\
&#x20;   height: 60px;\
&#x20;   border: 20px solid red;\
&#x20;   -moz-border-radius: 50px 50px 0 50px;\
&#x20;        border-radius: 50px 50px 0 50px;\
&#x20;   -webkit-transform: rotate(-45deg);\
&#x20;      -moz-transform: rotate(-45deg);\
&#x20;       -ms-transform: rotate(-45deg);\
&#x20;        -o-transform: rotate(-45deg);\
&#x20;           transform: rotate(-45deg);\
}\
\
\#infinity:after {\
&#x20;   left: auto;\
&#x20;   right: 0;\
&#x20;   -moz-border-radius: 50px 50px 50px 0;\
&#x20;        border-radius: 50px 50px 50px 0;\
&#x20;   -webkit-transform: rotate(45deg);\
&#x20;      -moz-transform: rotate(45deg);\
&#x20;       -ms-transform: rotate(45deg);\
&#x20;        -o-transform: rotate(45deg);\
&#x20;           transform: rotate(45deg);\
}\
&#x9;			&#x9;

### Diamond Square[via Joseph Silber](http://josephsilber.com/)

\
\#diamond {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border: 50px solid transparent;\
&#x9;border-bottom-color: red;\
&#x9;position: relative;\
&#x9;top: -50px;\
}\
\#diamond:after {\
&#x9;content: '';\
&#x9;position: absolute;\
&#x9;left: -50px;\
&#x9;top: 50px;\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border: 50px solid transparent;\
&#x9;border-top-color: red;\
}\


### Diamond Shield[via Joseph Silber](http://josephsilber.com/)

\
\#diamond-shield {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border: 50px solid transparent;\
&#x9;border-bottom: 20px solid red;\
&#x9;position: relative;\
&#x9;top: -50px;\
}\
\#diamond-shield:after {\
&#x9;content: '';\
&#x9;position: absolute;\
&#x9;left: -50px; top: 20px;\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border: 50px solid transparent;\
&#x9;border-top: 70px solid red;\
}\


### Diamond Narrow[via Joseph Silber](http://josephsilber.com/)

\
\#diamond-narrow {\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border: 50px solid transparent;\
&#x9;border-bottom: 70px solid red;\
&#x9;position: relative;\
&#x9;top: -50px;\
}\
\#diamond-narrow:after {\
&#x9;content: '';\
&#x9;position: absolute;\
&#x9;left: -50px; top: 70px;\
&#x9;width: 0;\
&#x9;height: 0;\
&#x9;border: 50px solid transparent;\
&#x9;border-top: 70px solid red;\
}\


### Cut Diamondvia Alexander Futekov

\
\#cut-diamond {\
&#x20;   border-style: solid;\
&#x20;   border-color: transparent transparent red transparent;\
&#x20;   border-width: 0 25px 25px 25px;\
&#x20;   height: 0;\
&#x20;   width: 50px;\
&#x20;   position: relative;\
&#x20;   margin: 20px 0 50px 0;\
}\
\#cut-diamond:after {\
&#x20;   content: "";\
&#x20;   position: absolute;\
&#x20;   top: 25px;\
&#x20;   left: -25px;\
&#x20;   width: 0;\
&#x20;   height: 0;\
&#x20;   border-style: solid;\
&#x20;   border-color: red transparent transparent transparent;\
&#x20;   border-width: 70px 50px 0 50px;\
}\
\


### Egg

\
\#egg {\
&#x20;  display:block;\
&#x20;  width: 126px;\
&#x20;  height: 180px;\
&#x20;  background-color: red;\
&#x20;  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;\
&#x20;  border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;\
}\
\


### Pac-Man

\
\#pacman {\
&#x20; width: 0px;\
&#x20; height: 0px;\
&#x20; border-right: 60px solid transparent;\
&#x20; border-top: 60px solid red;\
&#x20; border-left: 60px solid red;\
&#x20; border-bottom: 60px solid red;\
&#x20; border-top-left-radius: 60px;\
&#x20; border-top-right-radius: 60px;\
&#x20; border-bottom-left-radius: 60px;\
&#x20; border-bottom-right-radius: 60px;\
}\
\


### Talk Bubble

\
\#talkbubble {\
&#x20;  width: 120px;\
&#x20;  height: 80px;\
&#x20;  background: red;\
&#x20;  position: relative;\
&#x20;  -moz-border-radius:    10px;\
&#x20;  -webkit-border-radius: 10px;\
&#x20;  border-radius:         10px;\
}\
\#talkbubble:before {\
&#x20;  content:"";\
&#x20;  position: absolute;\
&#x20;  right: 100%;\
&#x20;  top: 26px;\
&#x20;  width: 0;\
&#x20;  height: 0;\
&#x20;  border-top: 13px solid transparent;\
&#x20;  border-right: 26px solid red;\
&#x20;  border-bottom: 13px solid transparent;\
}\
\


### 12 Point Burst[via Alan Johnson](http://commondream.net/post/8848553728/pure-css-badges)

\
\#burst-12 {\
&#x20;   background: red;\
&#x20;   width: 80px;\
&#x20;   height: 80px;\
&#x20;   position: relative;\
&#x20;   text-align: center;\
}\
\#burst-12:before, #burst-12:after {\
&#x20;   content: "";\
&#x20;   position: absolute;\
&#x20;   top: 0;\
&#x20;   left: 0;\
&#x20;   height: 80px;\
&#x20;   width: 80px;\
&#x20;   background: red;\
}\
\#burst-12:before {\
&#x20;   -webkit-transform: rotate(30deg);\
&#x20;      -moz-transform: rotate(30deg);\
&#x20;       -ms-transform: rotate(30deg);\
&#x20;        -o-transform: rotate(30deg);\
}\
\#burst-12:after {\
&#x20;   -webkit-transform: rotate(60deg);\
&#x20;      -moz-transform: rotate(60deg);\
&#x20;       -ms-transform: rotate(60deg);\
&#x20;        -o-transform: rotate(60deg);\
}\
\


### 8 Point Burst[via Alan Johnson](http://commondream.net/post/8848553728/pure-css-badges)

\
\#burst-8 {\
&#x20;   background: red;\
&#x20;   width: 80px;\
&#x20;   height: 80px;\
&#x20;   position: relative;\
&#x20;   text-align: center;\
&#x20;   -webkit-transform: rotate(20deg);\
&#x20;      -moz-transform: rotate(20deg);\
&#x20;       -ms-transform: rotate(20deg);\
&#x20;        -o-transform: rotate(20eg);\
}\
\#burst-8:before {\
&#x20;   content: "";\
&#x20;   position: absolute;\
&#x20;   top: 0;\
&#x20;   left: 0;\
&#x20;   height: 80px;\
&#x20;   width: 80px;\
&#x20;   background: red;\
&#x20;   -webkit-transform: rotate(135deg);\
&#x20;      -moz-transform: rotate(135deg);\
&#x20;       -ms-transform: rotate(135deg);\
&#x20;        -o-transform: rotate(135deg);\
}\
\


### Yin Yangvia Alexander Futekov

\
\#yin-yang {\
&#x9;width: 96px;\
&#x9;height: 48px;\
&#x9;background: #eee;\
&#x9;border-color: red;\
&#x9;border-style: solid;\
&#x9;border-width: 2px 2px 50px 2px;\
&#x9;border-radius: 100%;\
&#x9;position: relative;\
}\
\
\#yin-yang:before {\
&#x9;content: "";\
&#x9;position: absolute;\
&#x9;top: 50%;\
&#x9;left: 0;\
&#x9;background: #eee;\
&#x9;border: 18px solid red;\
&#x9;border-radius: 100%;\
&#x9;width: 12px;\
&#x9;height: 12px;\
}\
\
\#yin-yang:after {\
&#x9;content: "";\
&#x9;position: absolute;\
&#x9;top: 50%;\
&#x9;left: 50%;\
&#x9;background: red;\
&#x9;border: 18px solid #eee;\
&#x9;border-radius:100%;\
&#x9;width: 12px;\
&#x9;height: 12px;\
}\
\


### Badge Ribbon[via Catalin Rosu](http://www.red-team-design.com/)

\
\#badge-ribbon {\
&#x20;position: relative;\
&#x20;background: red;\
&#x20;height: 100px;\
&#x20;width: 100px;\
&#x20;-moz-border-radius:    50px;\
&#x20;-webkit-border-radius: 50px;\
&#x20;border-radius:         50px;\
}\
\
\#badge-ribbon:before,\
\#badge-ribbon:after {\
&#x20; content: '';\
&#x20; position: absolute;\
&#x20; border-bottom: 70px solid red;\
&#x20; border-left: 40px solid transparent;\
&#x20; border-right: 40px solid transparent;\
&#x20; top: 70px;\
&#x20; left: -10px;\
&#x20; -webkit-transform: rotate(-140deg);\
&#x20; -moz-transform:    rotate(-140deg);\
&#x20; -ms-transform:     rotate(-140deg);\
&#x20; -o-transform:      rotate(-140deg);\
}\
\
\#badge-ribbon:after {\
&#x20; left: auto;\
&#x20; right: -10px;\
&#x20; -webkit-transform: rotate(140deg);\
&#x20; -moz-transform:    rotate(140deg);\
&#x20; -ms-transform:     rotate(140deg);\
&#x20; -o-transform:      rotate(140deg);\
}\
\


### Space Invader[via Vlad Zinculescu](http://ecsspert.com/)

\
\#space-invader{\
\
&#x20; box-shadow:\
&#x20;   0 0 0 1em red,\
&#x20;   0 1em 0 1em red,\
&#x20;   -2.5em 1.5em 0 .5em red,\
&#x20;   2.5em 1.5em 0 .5em red,\
&#x20;   -3em -3em 0 0 red,\
&#x20;   3em -3em 0 0 red,\
&#x20;   -2em -2em 0 0 red,\
&#x20;   2em -2em 0 0 red,\
&#x20;   -3em -1em 0 0 red,\
&#x20;   -2em -1em 0 0 red,\
&#x20;   2em -1em 0 0 red,\
&#x20;   3em -1em 0 0 red,\
&#x20;   -4em 0 0 0 red,\
&#x20;   -3em 0 0 0 red,\
&#x20;   3em 0 0 0 red,\
&#x20;   4em 0 0 0 red,\
&#x20;   -5em 1em 0 0 red,\
&#x20;   -4em 1em 0 0 red,\
&#x20;   4em 1em 0 0 red,\
&#x20;   5em 1em 0 0 red,\
&#x20;   -5em 2em 0 0 red,\
&#x20;   5em 2em 0 0 red,\
&#x20;   -5em 3em 0 0 red,\
&#x20;   -3em 3em 0 0 red,\
&#x20;   3em 3em 0 0 red,\
&#x20;   5em 3em 0 0 red,\
&#x20;   -2em 4em 0 0 red,\
&#x20;   -1em 4em 0 0 red,\
&#x20;   1em 4em 0 0 red,\
&#x20;   2em 4em 0 0 red;\
\
&#x20;   background: red;\
&#x20;   width: 1em;\
&#x20;   height: 1em;\
&#x20;   overflow: hidden;\
\
&#x20;   margin: 50px 0 70px 65px;\
&#x20; }\
\


### TV Screen

\
\#tv {\
&#x20; position: relative;\
&#x20; width: 200px;\
&#x20; height: 150px;\
&#x20; margin: 20px 0;\
&#x20; background: red;\
&#x20; border-radius: 50% / 10%;\
&#x20; color: white;\
&#x20; text-align: center;\
&#x20; text-indent: .1em;\
}\
\#tv:before {\
&#x20; content: '';\
&#x20; position: absolute;\
&#x20; top: 10%;\
&#x20; bottom: 10%;\
&#x20; right: -5%;\
&#x20; left: -5%;\
&#x20; background: inherit;\
&#x20; border-radius: 5% / 50%;\
}\
\


### Chevron[via Anthony Ticknor](http://twitter.com/apticknor)

\
\#chevron {\
&#x20; position: relative;\
&#x20; text-align: center;\
&#x20; padding: 12px;\
&#x20; margin-bottom: 6px;\
&#x20; height: 60px;\
&#x20; width: 200px;\
}\
\
\#chevron:before {\
&#x20; content: '';\
&#x20; position: absolute;\
&#x20; top: 0;\
&#x20; left: 0;\
&#x20; height: 100%;\
&#x20; width: 51%;\
&#x20; background: red;\
&#x20; -webkit-transform: skew(0deg, 6deg);\
&#x20; -moz-transform: skew(0deg, 6deg);\
&#x20; -ms-transform: skew(0deg, 6deg);\
&#x20; -o-transform: skew(0deg, 6deg);\
&#x20; transform: skew(0deg, 6deg);\
}\
\#chevron:after {\
&#x20; content: '';\
&#x20; position: absolute;\
&#x20; top: 0;\
&#x20; right: 0;\
&#x20; height: 100%;\
&#x20; width: 50%;\
&#x20; background: red;\
&#x20; -webkit-transform: skew(0deg, -6deg);\
&#x20; -moz-transform: skew(0deg, -6deg);\
&#x20; -ms-transform: skew(0deg, -6deg);\
&#x20; -o-transform: skew(0deg, -6deg);\
&#x20; transform: skew(0deg, -6deg);\
}​\
\
\


### Magnifying Glass

\
\#magnifying-glass\
{\
&#x20;font-size: 10em; /\* This controls the size. \*/\
&#x20;display: inline-block;\
&#x20;width: 0.4em;\
&#x20;height: 0.4em;\
&#x20;border: 0.1em solid red;\
&#x20;position: relative;\
&#x20;border-radius: 0.35em;\
}\
\#magnifying-glass::before\
{\
&#x20;content: "";\
&#x20;display: inline-block;\
&#x20;position: absolute;\
&#x20;right: -0.25em;\
&#x20;bottom: -0.1em;\
&#x20;border-width: 0;\
&#x20;background: red;\
&#x20;width: 0.35em;\
&#x20;height: 0.08em;\
&#x20;-webkit-transform: rotate(45deg);\
&#x20;   -moz-transform: rotate(45deg);\
&#x20;    -ms-transform: rotate(45deg);\
&#x20;     -o-transform: rotate(45deg);\
}\
&#x20;        &#x20;

### Facebook Icon[via Nathan Swartz](http://clicknathan.com/)

\
\#facebook-icon {\
&#x20; background: red;\
&#x20; text-indent: -999em;\
&#x20; width: 100px;\
&#x20; height: 110px;\
&#x20; border-radius: 5px;\
&#x20; position: relative;\
&#x20; overflow: hidden;\
&#x20; border: 15px solid red;\
&#x20; border-bottom: 0;\
}\
\#facebook-icon::before {\
&#x20; content: "/20";\
&#x20; position: absolute;\
&#x20; background: red;\
&#x20; width: 40px;\
&#x20; height: 90px;\
&#x20; bottom: -30px;\
&#x20; right: -37px;\
&#x20; border: 20px solid #eee;\
&#x20; border-radius: 25px;\
}\
\#facebook-icon::after {\
&#x20; content: "/20";\
&#x20; position: absolute;\
&#x20; width: 55px;\
&#x20; top: 50px;\
&#x20; height: 20px;\
&#x20; background: #eee;\
&#x20; right: 5px;\
}\
&#x20;        &#x20;

### Cone[via Omid Rasouli](http://www.blendesign.ir/)

\
\#cone {\
&#x20; width: 0;\
&#x20; height: 0;\
&#x20; border-left: 70px solid transparent;\
&#x20; border-right: 70px solid transparent;\
&#x20; border-top: 100px solid red;\
&#x20; -moz-border-radius: 50%;\
&#x20; -webkit-border-radius: 50%;\
&#x20; border-radius: 50%;\
}\
&#x20;        &#x20;

### Moon[via Omid Rasouli](http://www.blendesign.ir/)

\
\#moon {\
&#x20; width: 80px;\
&#x20; height: 80px;\
&#x20; border-radius: 50%;\
&#x20; box-shadow: 15px 15px 0 0 red;\
}\
&#x20;        &#x20;

### Flag[via Zoe Rooney](http://codepen.io/zoerooney/pen/xIoCn)

## flag {

width: 110px; height: 56px; padding-top: 15px; position: relative; background: red; color: white; font-size: 11px; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }

## flag:after {

content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 13px solid #eee; border-left: 55px solid transparent; border-right: 55px solid transparent; }
