巧用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

 

转载于:https://www.cnblogs.com/qqing/p/6529569.html