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

巴特西

巧用border属性

最新文章

热门文章