有时候在页面之中我们会碰到一些小三角,那么在实现上当然不只是简单的图片,今天小编来介绍一下用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);
}