The Shapes of CSS

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

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

#circle {    width:100px;    height:100px;    background:red;    -moz-border-radius:50px;    -webkit-border-radius:50px;    border-radius:50px;}

#oval {    width:200px;    height:100px;    background:red;    -moz-border-radius:100px/50px;    -webkit-border-radius:100px/50px;    border-radius:100px/50px;}

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

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

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

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

#triangle-topleft {    width:0;    height:0;    border-top:100px solid red;    border-right:100px solid Transparent;}

#triangle-topright {    width:0;    height:0;    border-top:100px solid red;    border-left:100px solid Transparent;}

#triangle-bottomleft {    width:0;    height:0;    border-bottom:100px solid red;    border-right:100px solid Transparent;}

#triangle-bottomright {    width:0;    height:0;    border-bottom:100px solid red;    border-left:100px solid Transparent;}

#curvedarrow {  position:relative;  width:0;  height:0;  border-top:9px solid transparent;  BORDER-RIGHT:9PX solid red;  -webkit-transform:rotate (10deg);  -moz-transform:rotate (10deg);  -ms-transform:rotate (10deg);  -o-transform:rotate (10deg);} #curvedarrow: After {  content: "";  Position:absolute;  border:0 solid transparent;  border-top:3px solid red;  border-radius:20px 0 0 0;  Top: -12px;  Left: -9px;  width:12px;  height:12px;  -webkit-transform:rotate (45deg);  -moz-transform:rotate (45deg);  -ms-transform:rotate (45deg);  -o-transform:rotate (45deg);}

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

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

#star-six {    width:0;    height:0;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-bottom:100px solid red;    Position:relative;} #star-six:after {    width:0;    height:0;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-top:100px solid red;    Position:absolute;    Content: "";    top:30px;    Left: -50px;}

#star-five {margin:50px 0;   position:relative;   Display:block;   color:red;   width:0px;   height:0px;   border-right:100px solid Transparent;   border-bottom:70px solid red;   border-left:100px solid Transparent;   -moz-transform:rotate (35DEG);   -webkit-transform:rotate (35DEG);   -ms-transform:rotate (35DEG); -o-transform:rotate (35deg);}   #star-five:before {border-bottom:80px solid red;   border-left:30px solid Transparent;   border-right:30px solid Transparent;   Position:absolute;   height:0;   width:0;   Top: -45px;   Left: -65px;   Display:block;   Content: ";   -webkit-transform:rotate ( -35DEG);   -moz-transform:rotate ( -35DEG);   -ms-transform:rotate ( -35DEG); -o-transform:rotate ( -35deg);}   #star-five:after {position:absolute;   Display:block;   color:red;   top:3px;   Left: -105px;   width:0px;   height:0px;   border-right:100px solid Transparent;   border-bottom:70px solid red; border-left:100px Solid TranSparent;   -webkit-transform:rotate ( -70DEG);   -moz-transform:rotate ( -70DEG);   -ms-transform:rotate ( -70DEG);   -o-transform:rotate ( -70DEG); Content: ';}

Pentagon {    position:relative;    width:54px;    border-width:50px 18px 0;    Border-style:solid;    Border-color:red Transparent;} #pentagon: Before {    content: "";    Position:absolute;    height:0;    width:0;    Top: -85px;    Left: -18px;    border-width:0 45px 35px;    Border-style:solid;    Border-color:transparent transparent red;}

#hexagon {    width:100px;    height:55px;    background:red;    Position:relative;} #hexagon: Before {    content: "";    Position:absolute;    Top: -25px;    left:0;    width:0;    height:0;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-bottom:25px solid Red;} #hexagon: After {    content: "";    Position:absolute;    Bottom: -25px;    left:0;    width:0;    height:0;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-top:25px solid Red;}

#octagon {    width:100px;    height:100px;    background:red;    Position:relative;} #octagon: Before {    content: "";    Position:absolute;    top:0;    left:0;    BORDER-BOTTOM:29PX solid red;    BORDER-LEFT:29PX solid #eee;    BORDER-RIGHT:29PX solid #eee;    width:42px;    height:0;} #octagon: After {    content: "";    Position:absolute;    bottom:0;    left:0;    BORDER-TOP:29PX solid red;    BORDER-LEFT:29PX solid #eee;    BORDER-RIGHT:29PX solid #eee;    width:42px;    height:0;}

#heart {position:relative;    width:100px; height:90px;}    #heart: Before, #heart: after {position:absolute;    Content: "";    left:50px;    top:0;    width:50px;    height:80px;    background:red;    -moz-border-radius:50px 50px 0 0;    border-radius:50px 50px 0 0;       -webkit-transform:rotate ( -45DEG);        -moz-transform:rotate ( -45DEG);         -ms-transform:rotate ( -45DEG);            -o-transform:rotate ( -45DEG);    Transform:rotate ( -45DEG);       -webkit-transform-origin:0 100%;        -moz-transform-origin:0 100%;         -ms-transform-origin:0 100%;            -o-transform-origin:0 100%; Transform-origin:0 100%;}    #heart: after {left:0;       -webkit-transform:rotate (45DEG);        -moz-transform:rotate (45DEG);         -ms-transform:rotate (45DEG);            -o-transform:rotate (45DEG);    Transform:rotate (45DEG);       -webkit-transform-origin:100% 100%;        -moz-transform-origin:100% 100%;         -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%;}

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

#diamond {    width:0;    height:0;    border:50px solid transparent;    border-bottom-color:red;    position:relative;    Top: -50px;} #diamond: After {    content: ';    Position:absolute;    Left: -50px;    top:50px;    width:0;    height:0;    border:50px solid transparent;    border-top-color:red;}

#diamond-shield {    width:0;    height:0;    border:50px solid transparent;    border-bottom:20px solid red;    position:relative;    Top: -50px;} #diamond-shield:after {    content: ';    Position:absolute;    Left: -50px; top:20px;    width:0;    height:0;    border:50px solid transparent;    border-top:70px solid Red;}

#diamond-narrow {    width:0;    height:0;    border:50px solid transparent;    border-bottom:70px solid red;    position:relative;    Top: -50px;} #diamond-narrow:after {    content: ';    Position:absolute;    Left: -50px; top:70px;    width:0;    height:0;    border:50px solid transparent;    border-top:70px solid Red;}

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

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

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

#talkbubble {   width:120px;   height:80px;   background:red;   position:relative;   -moz-border-radius:    10px;   -webkit-border-radius:10px;   Border-radius:         10px;} #talkbubble: Before {   content: "";   Position:absolute;   right:100%;   top:26px;   width:0;   height:0;   border-top:13px solid transparent;   BORDER-RIGHT:26PX solid red;   border-bottom:13px solid Transparent;}

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

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

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

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

#space-invader{  Box-shadow:    0 0 0 1em Red,    0 1em 0 1em Red,    -2.5em 1.5em 0.5em Red,    2.5em 1.5em 0.5e M Red,    -3em-3em 0 0 Red,    3em-3em 0 0 Red,    -2em-2em 0 0 Red,    2em-2em 0 0 Red,    -3em-1em 0 0 red,
    -2em-1em 0 0 Red,    2em-1em 0 0 Red,    3em-1em 0 0 Red,    -4em 0 0 0 Red,    -3em 0 0 0 Red,    3em 0 0 0 Red,    4em 0 0 0 Red,    -5em 1em 0 0 red,    -4em 1em 0 0 red,    4em 1em 0 0 red,    5em 1em 0 0 red,
    -5em 2em 0 0 red,    5em 2em 0 0 red,    -5em 3em 0 0 red,    -3em 3em 0 0 red,    3em 3em 0 0 red,    5em 3em 0 0 Red,    -2em 4em 0 0 red,    -1em 4em 0 0 red,    1em 4em 0 0 red,    2em 4em 0 0 red;    background:red;    Width:1em;    Height:1em;    Overflow:hidden;    margin:50px 0 70px 65px;  }

#tv {  position:relative;  width:200px;  height:150px;  margin:20px 0;  background:red;  border-radius:50%/10%;  Color:white;  Text-align:center;  Text-indent:. 1em;} #tv: Before {  content: ';  Position:absolute;  top:10%;  bottom:10%;  Right: -5%;  Left: -5%;  Background:inherit;  border-radius:5%/50%;}

#chevron {  position:relative;  Text-align:center;  padding:12px;  margin-bottom:6px;  height:60px;  width:200px;} #chevron: Before {  content: ';  Position:absolute;  top:0;  left:0;  height:100%;  width:51%;  background:red;  -webkit-transform:skew (0deg, 6deg);  -moz-transform:skew (0deg, 6deg);  -ms-transform:skew (0deg, 6deg);  -o-transform:skew (0deg, 6deg);  Transform:skew (0deg, 6deg);} #chevron: After {  content: ';  Position:absolute;  top:0;  right:0;  height:100%;  width:50%;  background:red;  -webkit-transform:skew (0deg, -6deg);  -moz-transform:skew (0deg, -6deg);  -ms-transform:skew (0deg, -6deg);  -o-transform:skew (0deg, -6deg);  Transform:skew (0deg, -6deg);}?

#magnifying-glass{font-size:10em;/* This controls the size. */Display:inline-block; width:0.4em; height:0.4em; bord Er:0.1em solid red; position:relative; Border-radius:0.35em;} #magnifying-glass::before{content: ""; Display:inline-block; Position:absolute; Right: -0.25em; Bottom: -0.1em; border-width:0; background:red; Width:0.35em; Height:0.08em; -webkit-transform:rotate (45deg);    -moz-transform:rotate (45deg);     -ms-transform:rotate (45deg);      -o-transform:rotate (45deg);}

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

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

#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;}

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

#cross {  background:red;  height:100px;  position:relative;  width:20px;} #cross: after {  background:red;  Content: "";  height:20px;  Left: -40px;  Position:absolute;  top:40px;  width:100px;}

#base {  background:red;  Display:inline-block;  height:55px;  margin-left:20px;  margin-top:55px;    position:relative;    width:100px;} #base: Before {  border-bottom:35px solid red;  border-left:50px solid transparent;  border-right:50px solid transparent;  Content: "";  height:0;  left:0;  Position:absolute;  Top: -35px;  width:0;}

Note: Organized from the network

The Shapes of CSS