css偽元素寫三角形

本文轉載自查看原文 2019-08-24 15:34 930

^{先說偽元素和偽類的區別：}

^{偽類是針對CSS，而偽元素是針對HTML，偽類選擇器是CSS選擇器的一種，而偽類是“假”的HTML標簽}

^{偽類（選擇器）本質上是為了彌補常規CSS選擇器的不足，以便獲取到更多信息；}

^{偽元素本質上是創建了一個有內容的虛擬容器；}

^{在CSS3中，偽類和偽元素的語法得到了進一步的調整（一個冒號和兩個冒號）；}

^{在開發當中，可以同時使用多個偽類，而只能同時使用一個偽元素；}

父元素

#demo{
　　margin: 100px;
　　width: 100px;
　　height: 100px;
　　border: 1px solid black;
　　position: relative;
}

偽元素

#demo:before{
　　content:"";
　　width:0;
　　height:0;
　　position: absolute;
　　top: 34px;
　　left: 100px;
　　border-top:solid 15px transparent;
　　border-left:solid 15px black ;
　　border-bottom:solid 15px transparent;
}