#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