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

最新推荐文章于 2024-09-11 08:45:00 发布

转载最新推荐文章于 2024-09-11 08:45:00 发布 · 575 阅读

2 ·

CC 4.0 BY-SA版权

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

本文介绍如何使用CSS的border属性来绘制不同形状的三角形，并通过组合这些三角形来创建更复杂的效果，例如带有突出边角的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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