** 前端7班 陆恩泽**
在预习5班课件过程中,若愚老师布置一个小作业就是通过CSS写一个三角符号,当时看了一些源代码的demo不是很懂(如下:粘贴CSS相关代码)。
代码块
*{
margin: 0;
padding: 0;
}
.caret-down {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-bottom: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
我上网搜索了相关的技术博客戳这边,弄清了绘制的原理。在绘制三角形时务必要把元素的宽度和高度设置为0。我们通过设置边框的属性和边框颜色绘制不同方向和颜色的三角形