今天學(xué)到的兩種方式可以實(shí)現(xiàn)三角形挂捻,簡(jiǎn)單寫一下
方法一:
html代碼:<span>我是三角形</span>
css代碼如下:用偽元素實(shí)現(xiàn)一下
span:before{
? ? ? ? ? content: "";
? ? ? ? ?display: block;
? ? ? ? ?width:20px;
? ? ? ? border-top:10px solid transparent;
? ? ? ? border-bottom:10px solid transparent;
? ? ? ? border-right:10px solid red;
}
這個(gè)方式感覺(jué)不是特別好奈附,因?yàn)閷?shí)現(xiàn)的是左右兩個(gè)三角。
方法二: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;
}
這個(gè)方式個(gè)人覺(jué)得還是比較實(shí)用的奥额,想要實(shí)現(xiàn)哪個(gè)角,直接給那個(gè)角添加顏色(transparent:透明度)