橢圓框上加三角形

效果圖如圖所示:


image.png

關(guān)鍵代碼:

css:
    <style>
        #demo{
            width: 100px;
            height: 30px;
            background-color: #abc;
            position: relative;
            border:4px solid #333;
            margin: 100px;
            border-radius: 20px;
        }
        #demo:after,#demo:before{
            border:solid transparent;
            content:'';
            height: 0;
            width: 0;
            position: absolute;
        }
        #demo:after{
            border-width: 11px;
            border-bottom-color: #abc;
            left:39px;
            top:-22px;
        }
        #demo:before{
            border-width: 14px;
            border-bottom-color: #333;
            left: 36px;
            top:-31px;
        }
    </style>    
html:
<body>
   <div id="demo">     
   </div>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容