CSS实现三角形的四种方法

显示全部楼层 · 2023-8-23 11:51:06

方法一：利用 border (常见)

【表明】不设置宽高，用边框大小控制三角型大小
【分解步调】

设置一个div不设宽高
【示例】

<style>
#triangle{
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
</style>

复制代码

2. 设置透明

留下想要指向方向相反的边框设定，其他方向的边框设为transparent透明

【示例】实现指向向上的三角形

<style>
.Up{
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid orangered;
}
</style>

复制代码

【效果图】指向上，指向下，指向左，指向右

怎样设置差别的三角形

可以通过调解差别方向边框的值来实现差别方向和大小的三角形

方法二：利用 linear-gradient

【表明】两色渐变，调为实色，一色透明
【分解步调】

两色渐变

<style>
.first{
background: linear-gradient(45deg, deeppink, yellowgreen);
}
</style>

复制代码

调为实色

<style>
.second{
background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
</style>

复制代码

一色透明

<style>
.second{
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}
</style>

复制代码

【效果图】

怎样设置差别的三角形

通过旋转 rotate 大概 scale，也能得到各种角度，差别大小的三角形

方法三：利用 clip-path

【表明】裁剪多边型的方式，创建元素的可显示区域。区域内的部分显示，区域外的隐蔽。
【示例】

<style>
div{
width: 100px;
height: 100px;
background: gold;
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
</style>

复制代码

clip-path：

polygon(x1 y1，x2 y2，x3 y3)；

相识更多clip-path属性
【效果图】

怎样设置差别的三角形

可以借助CSS clip-path maker

方法四：利用字符

三角形形状的字符的十进制 Unicode 表示码

<div class="one">► </div>
<div class="two">▼ </div>
<div class="three">▲ </div>
<div class="four">⊿ </div>
<div class="five">△ </div>

复制代码

【注意】用font-size控制大小，用color控制颜色

空心三角形怎样实现：

当div元素嵌套时可设置出空心三角形或是带三角形的气泡框。实比方下：

实现的核心头脑
空心三角形

同样是利用三角形，加上伪类选择器before或after。before或after里设计一个三角形，此中一个配景颜色与环境颜色雷同（一样平常为白色），用白色的三角形掩饰住另一个三角形即可到达三角形空心的目的。
注意：掩饰过程一样平常利用定位，容器设置为相对定位（不脱离文档流），三角形设置绝对定位。通过top,left,bottom,right调解位置即可。
这时为了到达掩饰效果，应利用z-index设置使配景致三角形可以大概掩饰另一个三角形。
带三角形的气泡框
本例实际可拆分为一个盒子和一个空心三角形。这时可同时设置before和after。各自设置好边框构成三角形相互掩饰即可到达效果。
气泡框：

<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN测试-实现带三角形的气泡框</title>
<style>
.div{
width:300px;
height:300px;
border: 10px solid #0082df;
position: relative;
}
.div::after{
content: "";
position: absolute;
right:60px;
top:300px;
width:0px;
height:0px;
border:30px solid transparent;
border-top: 30px solid #0082df;
}
.div::before{
content: "";
position: absolute;
top:295px;
left:180px;
z-index: 1;
width:0px;
height: 0px;
border: 30px solid transparent;
border-top:30px solid #fff;
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
</html>

复制代码

空心三角形：

<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN测试专用-实现空心三角形</title>
<style>
.div{
width:0px;
height:0px;
border: 100px solid transparent;
border-bottom-color: #0082df;
position: relative;
}
.div::after{
content: "";
position: absolute;
right:-100px;
top:-80px;
width:0px;
height:0px;
border:100px solid transparent;
border-bottom-color: #fff ;
z-index: 2;
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
</html>

复制代码

来源：https://blog.csdn.net/m0_60237095/article/details/130076471
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

[web教学] CSS实现三角形的四种方法