學習總結

HTML

<div class="son"></div>

CSS

            .son{
                width: 0px;
                border: 20px solid;
                border-color: black transparent transparent;
            }

效果：

在來個

HTML

        <div class="father"></div>

CSS：

            .father{
                position: relative;
                width: 200px;
                height: 100px;
                border: 1px solid saddlebrown;
                border-radius: 10px;
            }
            .father:before{
                content: "";
                width: 0px;
                border: 10px solid;
                font-size: 0px;  //防止幽靈空白但這裡沒有效果一樣，這是瀏覽器有渲染
                position: absolute;
                top:100%; left: 50%;
                border-color:#000000 #000000 transparent transparent;
            }