css實現(xiàn)三角形

今天學(xué)到的兩種方式可以實現(xiàn)三角形,簡單寫一下

方法一:

html代碼:<span>我是三角形</span>

css代碼如下:用偽元素實現(xiàn)一下

span:before{

? ? ? ? ? content: "";

? ? ? ? ?display: block;

? ? ? ? ?width:20px;

? ? ? ? border-top:10px solid transparent;

? ? ? ? border-bottom:10px solid transparent;

? ? ? ? border-right:10px solid red;

}


這個方式感覺不是特別好,因為實現(xiàn)的是左右兩個三角。

方法二:html代碼 ?<div class="box"></div>

css代碼如下:

.box{

width:0px;

border-left:30px solid red;

border-top: 30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid transparent;

}

這個方式個人覺得還是比較實用的,想要實現(xiàn)哪個角,直接給那個角添加顏色(transparent:透明度)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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