透明三角的两种设置方式

小白，其实是要做一个这东西（PS其实不是真的透明了只是三角颜色和大背景一样遮住的），实现原理两个三角形(小三角形遮住大三角形中间部分即可)

贴代码1（一个矩形，两个三角形，用相对位置定位，调整三角颜色即可）

#F
        {
            width:100px;
            height:100px;
            border:2px solid black;
        }
        #SD
        {
            width: 0px;
            height: 0px;
            position:relative;
            top:10px;
            left:100px;
            border-top: 11px solid transparent;
            border-bottom: 11px solid transparent;
            border-left: 11px solid black;
        }
          #SX
        {
            width: 0px;
            height: 0px;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 7px solid #fff;
            position:relative;
            top:-7px;
            left:-11px;
        }  

HTML部分

<div id="F">
    <div id="SD">
        <div id="SX"></div>
    </div>
    </div>

贴代码 2（这种方法和上面方法差别不大只是将两个三角用：before和：after代替，注意可能要调整三角的相对位置）

#F
        {
            width:100px;
            height:100px;
            border:2px solid blue;
        }
        #F::before
        {
            content:"";
            display:block;
            width: 0px;
            height: 0px;
            position:relative;
            top:10px;
            left:100px;
            border-top: 11px solid transparent;
            border-bottom: 11px solid transparent;
            border-left: 11px solid black;
        }
          #F::after
        {
            content:"";
            display:block;
            width: 0px;
            height: 0px;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 7px solid #fff;
            position:relative;
            top:-8px;
            left:100px;
        } 

PS:若是可以实现真的透明，请评论区留意我。