"CSS Shapes" Tutorial/Demo

home » code » css » css shapes

• 
• 

3/27/2013

This is how to make shapes with CSS. If you have another shape to share send it to me and I'll add it to the collection and link to your site. :)

Plus Sign

#plus-sign {
background:blue;
width:33px;
height:100px;
position:relative;
margin-left:33px;
}
#plus-sign:before {
background:blue;
content:"";
width:100px;
height:33px;
position:absolute;
top:33px;
left:-33px;
}
		

Plus Sign Rounded

#plus-sign-rounded {
background:blue;
width:33px;
height:100px;
position:relative;
margin-left:33px;
border-radius:20px;
}
#plus-sign-rounded:before{
background:blue;
content:"";
width:100px;
height:33px;
position:absolute;
top:33px;
left:-33px;
border-radius:20px;
} 
		

Times

#times {
background:blue;
width:33px;
height:100px;
position:relative;
margin-left:33px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
#times:before{
background:blue;
content:"";
width:100px;
height:33px;
position:absolute;
top:33px;
left:-33px;
} 
		

Eight pointed star – double border

#eight-point-star-border {
background:#fff;
width:60px;
height:60px;
margin:10px;
border:double 10px blue ;
position:relative;
}
#eight-point-star-border:before{
content:"";
background:transparent;
width:60px;
height:60px;
position:absolute;
top:-10px;
left:-10px;
border:double 10px blue;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
} 
		

Berry

#berry {
background:blue;
width:80px;
height:80px;
margin:10px;
position:relative;
border-radius:15px;
}
#berry:before{
content:"";
background:blue;
width:80px;
height:80px;
position:absolute;
border-radius:15px;
transform:rotate(30deg);
} 
#berry:after{
content:"";
background:blue;
width:80px;
height:80px;
position:absolute;
border-radius:15px;
-webkit-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
} 
		

Eight point Star

#eight-point-star {
background:transparent;
width:60px;
height:0;
position:relative;
margin-top:30px;
border-top:solid 20px blue;
border-bottom:solid 20px blue;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
}
#eight-point-star:before{
content:"";
background:transparent;
width:60px;
height:0;
position:absolute;
top:-20px;
left:-20px;
border-top:solid 20px blue;
border-bottom:solid 20px blue;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
} 
		

Mushroom

#mushroom{
position:relative;
width:100px;
height:50px;
background:blue;
border-radius:100% 100% 0 0/170% 170% 0 0;
}
#mushroom:after{
position:absolute;
content:'';
width:40px;
height:75px;
background:blue;
left:50%;
margin-left:-20px;
border-radius:100% 100% 50% 50%/200% 200% 30% 30%;
top:50%;
} 
		

Curved Downward Arrow

#curved-downward-arrow {
position:relative;
width:0;
height:0;
border-top:9px solid transparent;
border-right:9px solid blue;
-webkit-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
transform:rotate(10deg);
}
#curved-downward-arrow:after {
content:'';
position:absolute;
border:0 solid transparent;
border-top:3px solid blue;
border-radius:20px 0 0 0;
top:-12px;
left:-9px;
width:12px;
height:12px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
		

12 Point Burst

#burst-12 {
background:blue;
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:blue;
}
#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);
}
		

Yin Yang

#yin-yang {
width:96px;
height:48px;
background:#fff;
border-color:blue;
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:#fff;
border:18px solid blue;
border-radius:100%;
width:12px;
height:12px;
}
#yin-yang:after {
content:"";
position:absolute;
top:50%;
left:50%;
background:blue;
border:18px solid #fff;
border-radius:100%;
width:12px;
height:12px;
}
		

Badge Ribbon

#badge-ribbon {
position:relative;
background:blue;
height:100px;
width:100px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
#badge-ribbon:before, #badge-ribbon:after {
content:'';
position:absolute;
border-bottom:70px solid blue;
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

#space-invader {
box-shadow:
0 0 0 1em blue,0 1em 0 1em blue,-2.5em 1.5em 0 .5em blue,2.5em 1.5em 0 .5em blue, -3em -3em 0 0 blue,3em -3em 0 0 blue,-2em -2em 0 0 blue,2em -2em 0 0 blue,-3em -1em 0 0 blue,-2em -1em 0 0 blue,2em -1em 0 0 blue,3em -1em 0 0 blue,-4em 0 0 0 blue,-3em 0 0 0 blue,3em 0 0 0 blue,4em 0 0 0 blue,-5em 1em 0 0 blue,-4em 1em 0 0 blue,4em 1em 0 0 blue,5em 1em 0 0 blue,-5em 2em 0 0 blue,5em 2em 0 0 blue,-5em 3em 0 0 blue,-3em 3em 0 0 blue,3em 3em 0 0 blue,5em 3em 0 0 blue,-2em 4em 0 0 blue,-1em 4em 0 0 blue,1em 4em 0 0 blue,2em 4em 0 0 blue;
background:blue;
width:1em;
height:1em;
overflow:hidden;
margin:55px 0 80px 65px;
}
		

TV Screen

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

Magnifying Glass

#magnifying-glass {
font-size:10em; /* This controls the size. */
display:inline-block;
width:0.4em;
height:0.4em;
border:0.1em solid blue;
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:blue;
width:0.35em;
height:0.08em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
		

Biohazard

#biohazard {
width:0;
height:0;
border-bottom:50px solid black;
border-top:50px solid black;
border-left:50px solid yellow;
border-right:50px solid yellow;
-moz-border-radius:50px; 
-webkit-border-radius:50px; 
border-radius:50px;
}
		

Ribbon

#ribbon {
width:0;
height:100px;
border-left:50px solid blue;
border-right:50px solid blue;
border-bottom:35px solid transparent;
}
		

Square

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

Rectangle

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

Circle

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

Oval

#oval { 
width:200px; 
height:100px; 
background:blue; 
border-radius:100px/50%;
} 
		

Triangle Up

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

Triangle Down

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

Triangle Left

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

Triangle Right

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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

Trapezoid

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

Parallelogram

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

Star (6-points)

#star-six {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid blue;
position:relative;
}
#star-six:after {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid blue
position:absolute;
content:'';
top:30px;
left:-50px;
}
		

Star (5-points)

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

Pentagon

#pentagon {
position:relative;
width:54px;
border-width:50px 18px 0;
border-style:solid;
border-color:blue 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 blue;
}
		

Hexagon

#hexagon {
width:100px;
height:55px;
background:blue;
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 blue;
}
#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 blue;
}
		

Octagon

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

Heart

#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

#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 blue;
-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 Square

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

Diamond Shield

#diamond-shield {
width:0;
height:0;
border:50px solid transparent;
border-bottom:20px solid blue;
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 blue;
}
		

Diamond Narrow

#diamond-narrow {
width:0;
height:0;
border:50px solid transparent;
border-bottom:70px solid blue;
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 blue;
}
		

Diamond Cut

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

Egg

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

Pac-Man

#pac-man {
width:0;
height:0;
border-right:60px solid transparent;
border-top:60px solid yellow;
border-left:60px solid yellow;
border-bottom:60px solid yellow;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}
		

Talk Bubble

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

Half Circle

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

Quarter Circle

#quarter-circle {
width:75px;
height:75px;
background:blue;
border-radius:90px 0 0 0;
-moz-border-radius:90px 0 0 0;
-webkit-border-radius:90px 0 0 0;
}
		

Credit 1
Credit 2
Credit 3

• ADVERTISE HERE

• Connect With Picnic Website Code Tutorials On Facebook
• Connect With Picnic Website Code Tutorials On Pinterest
• Connect With Picnic Website Code Tutorials On Twitter
• Connect With Picnic Website Code Tutorials On Google+

Search

Sponsors

• ADVERTISE HERE
• ADVERTISE HERE

Menu

• Newset Entries
• PHP
• Photo Galleries
• CSS Nav Menus
• jQuery Plugins
• iPhone & iPad
• htaccess
• CSS
• HTML
• Photoshop Screencasts
• Javascript
• IE Specific
• Flash & Music
• Helpful Tips
• Contact Forms
• Icons & Images
• Website Templates
• All Things www/MSC Help
• Software & Product Reviews
• Search Engine Optimization (SEO)
• phpBB Forum
• Guest Posts

Top Donators

• powerdrillguru.com
• phlipfoto.com
• americansignletters.com
• forsaljningschefen.se
• lipumanoinvestments.com
• cheapestflightshotels.com
• accountingjb.wordpress.com
• midwestwebdesignstudio.com
• sandiegobestwindows.com
• I WANT TO DONATE!

Friends of Mine

• Paul O'B @ pmob.co.uk
• Jim H. @ hibbard.eu
• Ray H. @ css-lab.com