CSS3 Tutorial: creating shapes

With CSS3 we are also able to create various geometric shapes, like triangles, parallelograms, stars, circles, ovals, etc. Previously we needed Javascript for this kind of trickery, but no more. In the examples below I constructed various shapes, using only CSS3 and HTML.

.cirkel { 
    width: 140px;
    height: 140px;
    background: red; 
    -moz-border-radius: 70px; 
    -webkit-border-radius: 70px; 
    border-radius: 70px;
}

Browser support

.ovaal {
    width: 160px; 
    height: 80px; 
    background: #666; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px;
}
.vierkant {
    width: 80px; 
    height: 80px;
    background: #666;
}
.rechthoek {
    width: 140px; 
    height: 80px;
    background: #666;
}
.pijl_noord{
    width: 0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
}
.pijl_oost{
    width: 0;
    height: 0;
    border-left: 100px solid #666;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}
.pijl_zuid{
    width: 0; 
    height: 0;
    border-top: 100px solid red;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
}
.pijl_west{
    width: 0;
    height: 0;
    border-right: 100px solid #666;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}
.trapezium {
    height: 0; 
    width: 80px;
    border-bottom: 80px solid red;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
.ruit {
    width: 80px; 
    height: 80px; 
    background: #666;
    margin: 3px 0 0 30px;
    /* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.parallelogram {
    width: 130px; 
    height: 75px;
    background: red;
    /* Skew */
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg);
    transform: skew(20deg);
}
.ster {
    height: 100px;
    width: 100px;
    background: #666;
    position: absolute;
}

.ster:before {
    height: 100px;
    width: 100px;
    background: #666;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

.ster:after {
    height: 100px;
    width: 100px;
    background: #666;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.ster2 {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 80px solid red;
}


.ster2:after {
    content:"";
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 80px solid red;
    margin: 30px 0 0 -50px;
}
.achthoek { 
    width: 100px; 
    height: 100px; 
    background: #666;
}

.achthoek:before {
    height: 0;
    width: 40px;
    content:"";
    position: absolute; 
    border-bottom: 30px solid #666;
    border-left: 30px solid white; 
    border-right: 30px solid white;
}

.achthoek:after {
    height: 0;
    width: 40px;
    content:"";
    position: absolute; 
    border-top: 30px solid #666; 
    border-left: 30px solid white; 
    border-right: 30px solid white; 
    margin: 70px 0 0 0;
}
.strip_ballon {
    width: 120px; 
    height: 80px; 
    background: red;
    position: absolute;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
}

.strip_ballon:before {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
    margin: 13px 0 0 -25px;
}
.ei {
    display:block;
    width:100px; 
    /* width has to be 70% of height */
    /* could use width:70%; in a square figureContainer group */
    height:140px;
    background-color:#666;/* beware that Safari needs actual
    px for border radius (bug) */
    -webkit-border-radius:63px 63px 63px 63px/
    108px 108px 72px 72px;
    /* fails in Safari, but overwrites in Chrome */
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
.gelijkzijdige3hoek {
    width: 0;
    height: 0;
    border-bottom: 104px solid red;
    /* 104 = 120 * 0.866 */
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}
.taartpunt {
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-top: 60px solid #666;
    border-left: 60px solid #666;
    border-bottom: 60px solid #666;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}
.danger {
    width: 0;
    height: 0;
    border-bottom: 60px solid black;
    border-top: 60px solid black;
    border-left: 60px solid blue;
    border-right: 60px solid blue;
    -moz-border-radius: 60px; 
    -webkit-border-radius: 60px; 
    border-radius: 60px;
}
.hart { 
    position: relative;
}

.hart:before, .hart:after {
    position: absolute;
    content: "";
    left: 70px; top: 0;
    width: 70px;
    height: 115px;
    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%;
}

.hart: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%;
}

Leave a comment