在前端工作中遇到三角形或者需要箭头的样式,我们不仅可以利用图片来实现效果,还可以利用css来实现。
<div class="triangle"></div>
1、利用border来实现
(1)向下三角形
.triangle{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:#ff0000 transparent transparent transparent;
}
(2)向左三角形
.triangle{
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent #ff0000 transparent transparent;
}
(3)利用 CSS3 transfrom 旋转 45 度实现三角形
<div class="triangle">
<span>css3 transfrom 三角形</span>
<div class="transform">&l