.div1{
width: 10px;
height: 10px;
border-width: 10px;
border-color: pink red blue green;
border-style: solid;
}
宽高等于10像素实现效果
当宽度和高度都等于0的时候border都被填充了分别有四个三角
实现代码
.div1{
width: 0;
height: 0;
border-width: 10px;
border-color: pink red blue green;
border-style: solid;
}
上三角效果实现
将border:pink transparent transparent transparent设置为pink 其余为透明色,
border分别表示上右下左
实现代码
.div2{
width: 0;
height: 0;
border-width: 10px;
border-color: pink transparent transparent transparent;
border-style: solid;
}
左三角效果的实现
实现代码
.div4{
width: 0;
height: 0;
border-width: 10px;
border-color: transparent transparent transparent yellow;
border-style: solid;
}
空心箭头效果的实现
设置div的宽高样式 把
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
设置相同的样式 然后根据 需要进行旋转
实现代码
.div3{
width: 20px;
height: 20px;
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
transform:rotate(47deg);
-webkit-transform:rotate(47deg);
}