CSS画三角形以及before,after伪元素的应用。

利用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>

 

posted @ 2017-06-26 13:35  懒先生的夫人  阅读(9369)  评论(1)  编辑  收藏  举报