有时候在页面之中我们会碰到一些小三角，那么在实现上当然不只是简单的图片，今天小编来介绍一下用CSS如何制作一个小三角形，话不多说直接撸上代码：
<style>
div{
margin: 100px auto; /*这边只是让盒子在页面中居中*/
width: 0;
height: 0; /*实现三角形必须给盒子无宽高*/
border-right: 30px solid transparent;
border-left: 30px solid transparent; /*左右定义透明色但还是存在*/
border-top:30px solid red;
}
</style>
<body>
<div></div>
</body>效果图如下：
那么当然纯看代码想象不到如何去实现的，小编通过反复改border比较也没想出来，后来给盒子加上宽高就很明了了（给盒子定义了100*100的宽高），效果图如下：
我们通过审查元素来看一下盒子，根据border的样式很容易想到当盒子宽高为0时把border往中间靠到一起就实现了三角形，这样就能理解三角的形成了，至于方向很简单没定义谁的border那么方向就向哪里。
页面中常见的鼠标触碰一下旋转同样可以实现,在上述条件下给div加上如下属性，触碰自动旋转。
div{
transition:1s;
}
div:hover{
tranform: rotate(180deg);
}
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
