利用css制作带边框的小三角

利用css制作带边框的小三角

标签（空格分隔）：css

---

在项目中会使用到的小实例，目前知道的有两种方法来实现

1. 设置元素的宽和高，利用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);
   }

2. 设置元素的宽和高为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;
}

实现的效果图：

具体方位大小可自行调整，大体制作思路是这样。