巧用border属性
border是常见的css2属性,大家的印象中是不是只是作为边框使用,如下所示:
事实上border,还可以当做图标去使用
我们先来看段代码
<style> .div1{ margin: 100px; border: 20px solid ; width: 0; height: 0; border-top-color: red; border-bottom-color: blue; border-left-color: yellow; border-right-color: pink; } </style> <div class=" div1"></div>
下面是效果图:
还有
<style> .div2{ width: 15px;height: 15px; border-top: none; border-bottom: 5px solid red; border-left: none; border-right: 5px solid red; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> <div class="div2"></div>
效果图时下面这样的:(注意,transform属性最低只能兼容到IE9)
所以同理,我们可以用border,做出以下的图标来
好了,大致的思路是这样,快去尝试一下吧!
或者,你可以狠狠的点击这里,查看我的小demo