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

最新推荐文章于 2024-06-19 14:48:22 发布

18790970257

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量533

点赞数

原文链接：http://www.cnblogs.com/lanxiansheng/p/7080106.html

版权

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

转载于:https://www.cnblogs.com/lanxiansheng/p/7080106.html

18790970257

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS画三角形以及before,after伪元素的应用。

利用css的border属性，即可实现三角形的绘制。1,代码及效果如下<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><style>.t0{ margin:30px; ...
复制链接

扫一扫