怎么用css控制border成为三角形

最新推荐文章于 2024-10-09 14:38:34 发布

转载最新推荐文章于 2024-10-09 14:38:34 发布

· 285 阅读

js 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了如何使用CSS的border属性来绘制各种形状的三角形，包括直角、等腰和不规则三角形，通过调整边框颜色和大小实现纯CSS图形设计。

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

布局div，并命名id="tri"，用CSS来控制div，在style里面，使用border属性对div进行控制，

#tri{

width: 0px;

height: 0px;

border-top: 400px solid red;

border-right: 400px solid blue;

border-bottom: 400px solid green;

border-left: 400px solid yellow;

}

【注意】div的长宽设为0，border为边框，会看到如下四个三角状的图形。

上述代码画的还不是三角形，但是是四个三角，只要将border周边的颜色变成白色就可以了，例如除了border-bottom: 100px solid green;其余全变为white，就会看到如下效果，当然你也可以根据自己需要来调整。

此外可以将border-top的像素设为0；其余两边也调小一点并且颜色设为白色，就会只看到底下的一个三角形了。

【注意】根据自己实际来挑选自己想要达到的效果。图一图二效果不同，就是border设定不同的原因。

https://zhidao.baidu.com/question/426723710833528812.html

网站上经常会使用一些三角形，除了图片的方式，实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置，当四个边相交的时候他们是什么时候改变的？

.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;
}

通过demo可以看到border的相交的地方在45deg平分，当元素的width、和height属性呗设置为0的时候

.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-top:solid 100px red;
  border-right:solid 100px rgba(0,0,0,0); 
}

这样我们就有一个直角三角形了，稍微修改一下

.t4{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 90px red;
  border-left:solid 200px rgba(0,0,0,0); 
}

这样做等腰直角三角形也简单了，保留相邻的三个边，两个设置为透明就行了

.t5{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 200px red;
  border-left:solid 200px rgba(0,0,0,0); 
  border-right:solid 200px rgba(0,0,0,0); 
}

再稍微调整一下，还可以做出各种形状

.t6{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 100px green;
  border-top:solid 100px rgba(0,0,0,0); 
  border-bottom:solid 100px rgba(0,0,0,0); 
}

.t7{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 200px green;
  border-top:solid 80px rgba(0,0,0,0); 
  border-bottom:solid 80px rgba(0,0,0,0); 
}

.t8{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 100px green;
  border-top:solid 200px rgba(0,0,0,0); 
  border-bottom:solid 100px rgba(0,0,0,0); 
}

https://www.cnblogs.com/dolphinX/p/4068894.html