Shape Making with CSS
Something we wish to creat or animate a shape but not from from images or SVG. With CSS we able to use border to make few shape.
Square
<![CDATA[
//square
#square {
width: 100px;
height: 100px;
background: skyblue;
}
]]>
Rounded Corner
<![CDATA[
//rounded
#rounded {
width: 100px;
height: 100px;
border-radius:10px;
background: skyblue;
}
]]>
Circle
<![CDATA[
//circle
#circle {
width: 100px;
height: 100px;
border-radius:50%;
background: skyblue;
}
]]>
Oval
<![CDATA[
//Oval
#Oval {
width: 200px;
height: 100px;
border-radius:50%;
background: skyblue;
}
]]>
Arrow Left
<![CDATA[
//Arrow left
#arrow-left {
width: 0;
height: 0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:40px solid skyblue;
}
]]>
Arrow Top
<![CDATA[
//Arrow top
#arrow-top {
width: 0;
height: 0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:40px solid skyblue;
}
]]>
Arrow Right
<![CDATA[
//Arrow right
#arrow-right {
width: 0;
height: 0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:40px solid skyblue;
}
]]>
Arrow Bottom
<![CDATA[
//Arrow bottom
#arrow-bottom {
width: 0;
height: 0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:40px solid skyblue;
}
]]>
