01 October 2013

Creating an Arrow And Circle Just With Html And CSS

Just with CSS we can create arrow marks. The following is the html code.


Code:-

<div style="width:0px;height: 0px;border-left: 15px solid transparent;border-right: 15px solid transparent;display: inline-block;zoom: 1;margin-left: 10px;float: left;border-bottom: 15px solid #999999;"></div>

The following is how it appears in the browser:-







The following is the code for creating a circle:-
<div style="float:left;width:50px;height:50px;">
<a style="background: #8f58a4;border-radius: 50%;cursor: pointer;display: inline-block;height: 100%;margin: 0;width: 100%;"></a>
</div>
Appearance in browser:-

No comments: