CSS畫三角形以及before,after偽元素的應用。

本文轉載自查看原文 2017-06-26 13:35 6097 CSS

利用css的border屬性，即可實現三角形的繪制。

1,代碼及效果如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<style>
.t0{
  margin:30px;
  height:200px;
  width:200px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}
.t1{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;

}
.t2{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
}
.t3{
  margin:30px;
  height:0px;
  width:0px;
  border-right:solid 100px orange;
  border-bottom:solid 100px transparent;
}
.t4{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px transparent;
  border-right:solid 100px transparent;
}
</style>
<body>
<div class="t0"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
</body>
</html>

2，利用before,after偽元素以及三角形繪制實現下列圖形

<style>

#demo{
  width:100px;
  height:100px;
  border:2px solid #000;
  position:relative;
}

/* 白色小三角形疊加在黑色大三角形上面，就只剩下2px的黑邊了，實現了右邊的小凸起效果 */

#demo:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:100px;
  top:18px;
  border-top:solid 12px transparent;
  border-left:solid 12px black;       /* 黑色大三角形 */
  border-bottom:solid 12px transparent;
}

#demo:after{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:100px;
  top:20px;
  border-top:solid 10px transparent;
  border-left:solid 10px white;     /* 白色小三角形 */
  border-bottom:solid 10px transparent;
}
</style>

<div id="demo"></div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css偽元素before/after和畫三角形的搭配應用使用偽元素after畫三角形 css偽元素寫三角形使用before、after偽類制作三角形理解使用before，after偽類實現小三角形氣泡框 css畫三角形、帶邊框的三角形、氣泡三角形前端（各種demo）一：css實現三角形，css實現梯形，pop彈層，css偽類before，after使用，svg使用（持續更新中）純CSS畫三角形（帶邊框） css3畫三角形的原理純CSS畫三角形（帶邊框）