利用css制作带边框的小三角
标签(空格分隔):css
在项目中会使用到的小实例,目前知道的有两种方法来实现
设置元素的宽和高,利用rotate实现,比较简单的一种
div{
width: 10px;
height: 10px;
border-right: 1px solid #656565;
border-top: 1px solid #656565;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}设置元素的宽和高为0,利用border实现,制作两个三角
div {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #999 transparent;
}
div:before {
position: absolute;
content: '';
top: 1px;
left: -9.5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9.5px 19px 9.5px;
border-color: transparent transparent #ffffff transparent;
}
实现的效果图:
具体方位大小可自行调整,大体制作思路是这样。