CSS: Beyond Basic
Shapes

With CSS3, <div> and other element tags can be shaped beyond simple rectangles.  Below is a list of different shapes and the CSS code needed to produce them.

Circle

 

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

 

Ellipse

 

#ellipse {
width:                  220px;
height:                 120px;
background:             lightgreen;
-moz-border-radius:     120px / 70px;
-webkit-border-radius:  120px / 70px;
border-radius:          120px / 70px;
}

 

Triangles

 

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

 

 

#triangle_down {
width:        0;
height:       0;
border-left:  50px solid transparent;
border-right: 50px solid transparent;
border-top:   100px solid lightgreen;
}

 

 

#triangle_rightangled {
width:         0;
height:        0;
border-bottom: 100px solid lightgreen;
border-right:  100px solid transparent;
}

Trapezoid

 

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

 

Star

css

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

 

Hexagon

css

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

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

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.