利用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;
}

实现的效果图：

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

转载于:https://www.cnblogs.com/king-ying/p/7568780.html