css三角形
div{
width:0;
height:0;
border-top:10px solid pink;
border-right:10px solid red;
border-bottom:10px solid blue;
botder-left:10px solid green;
}
如果只要一个三角就只需要给一个三角颜色,其他颜色为透明即可
div{
width:0;
height:0;
/这个是为了兼容性写的/
line-height:0;
font-size:0;
/三角的大小就是边框宽度大小,边框颜透明的/
border:50px solid transparent;
border-left-color:pink;
}
CSS3中三角写法
思路:
右下两条边框线,再进行旋转45度
HTML
<div></div>
Css
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #ccc;
}
div::after {
content: '';
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all .5s;
}
/ 鼠标经过div里面的三角 /
div:hover::after{
transform: rotate(225deg);
}
效果: