前端基礎CSS——CSS實現帶尖角的有背景顏色的正方形

前端開發過程中，下面這樣的圖標經常會遇到，當然，最簡單的方法是找UI切個背景圖，但是，代碼的世界也不能完全靠圖，那麼，用css又該如何實現呢，研究了網上的大多數方法，核心就是：定位+拼圖

1，先畫個長方形，設置相對定位，很簡單，不多說

.triangle{
    width:74px;
    height:20px;
    border: 1px rgba(38,110,237,0.44) solid;
    background-color:rgba(38,110,237,0.1);
    position:relative;
    border-radius: 2px;
}

2，需要畫一個三角形拼在左邊，變成下面這個樣子

.triangle:before{
    width:0px;
    height:0px;
    border:transparent solid;
    position:absolute;
    right:100%;
    content:"";
    border-width:10px;
    border-right-color: rgba(38,110,237,0.44); //邊框顏色和長方形背景顏色保持一致
    top:-1px;
}

是不是有點突兀，怪怪的，不急，來點補救，

3，再畫一個白色三角形，讓第二步的三角形看起來只有一個邊邊【如果背景顏色沒有透明度，這步可省略，直接下一步】

.triangle:after{
    width: 0px;
    height: 0px;
    border: transparent solid;
    position: absolute;
    right: 71px;
    content: "";
    border-width: 9px;
    border-right-color: #fff;
    top: 0px;
}

然後，就變成了這樣  

4，再畫一個和長方形一樣的三角形補上就ok啦      tip:這是定位在長方形裏的一個小元素

.blank1{
    width:0px;
    height:0px;
    border:transparent solid;
    position:absolute;
    border-width:8px;
    border-right-color: rgba(38,110,237,0.1);
    top:1px;
    right: 72px;
    z-index: 2;
}

然後就成了這個樣子，作爲一個嚴謹的開發，怎麼能有瑕疵呢，決定再補一下

5，再畫一個小小的線條把中間的空隙補充完整

.line1{
    width: 1px;
    height: 19px;
    position: absolute;
    right: 71px;
    top: -1px;
    background-color: rgba(38, 110, 237, 0.1);
    border-top: 1px solid rgba(38, 110, 237, 0.44);
    border-bottom: 1px solid rgba(38, 110, 237, 0.44);
    z-index: 10;
}

ok，完工，還算完美

最後再附上完整的代碼

<div class="triangle"><i class="blank1"></i><i class="line1"></i></div>

.triangle{
    width:74px;
    height:20px;
    border: 1px rgba(38,110,237,0.44) solid;
    background-color:rgba(38,110,237,0.1);
    position:relative;
    border-radius: 2px;
}
.triangle:before{
    width:0px;
    height:0px;
    border:transparent solid;
    position:absolute;
    right:100%;
    content:"";
    border-width:10px;
    border-right-color: rgba(38,110,237,0.44); //邊框顏色和長方形背景顏色保持一致
    top:-1px;
}

.triangle:after{
    width: 0px;
    height: 0px;
    border: transparent solid;
    position: absolute;
    right: 71px;
    content: "";
    border-width: 9px;
    border-right-color: #fff;
    top: 0px;
}
.blank1{
    width:0px;
    height:0px;
    border:transparent solid;
    position:absolute;
    border-width:8px;
    border-right-color: rgba(38,110,237,0.1);
    top:1px;
    right: 72px;
    z-index: 2;
}
.line1{
    width: 1px;
    height: 19px;
    position: absolute;
    right: 71px;
    top: -1px;
    background-color: rgba(38, 110, 237, 0.1);
    border-top: 1px solid rgba(38, 110, 237, 0.44);
    border-bottom: 1px solid rgba(38, 110, 237, 0.44);
    z-index: 10;
}