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

實現的效果圖：