Circle
.circle {
width: 100px;
height: 100px;
background: #07CAF3;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Oval
.oval {
height: 200px;
width: 100px;
background: #07CAF3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Triangle
.triangle {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #07CAF3;
}
Triangle-Side
.triangle-sided {
height: 0;
width: 0;
border-top: 100px solid #07CAF3;
border-right: 100px solid transparent;
}
Rectangle
.rectangle {
height: 100px;
width: 200px;
background: #07CAF3;
}
Parallelogram
.parallelogram {
height: 75px;
width: 150px;
background: #07CAF3;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
Trapezoid
.trapezoid {
height: 0;
width: 100px;
border-bottom: 100px solid #07CAF3;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Cone
.cone {
height: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #07CAF3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
0 Comments