文章目录
- 1. 绘制原理
- 2. 绘制最简单的三角形
- 3. 绘制对话框
- 4. 绘制两条直角边不等长的三角形
1. 绘制原理
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标
给每个边框不同的颜色可以看到，每个边框其实都是一个小三角形，那么我们就可以只设置一个或两个边框从而让一个盒子呈现出来三角形的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS 三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 50px solid pink;
border-right: 50px solid red;
border-bottom: 50px solid blue;
border-left: 50px solid green;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
2. 绘制最简单的三角形
我们只需要将边框的颜色设置为透明，然后给其中一个边颜色即可有下面效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS 三角制作</title>
<style>
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box2"></div>
</body>
</html>
3. 绘制对话框
类似对话框的效果：
<!DOCTYPE html>
<html lang="en">
<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>京东三角形</title>
<style>
.box {
position: relative;
width: 300px;
height: 100px;
margin: 200px auto;
background-color: skyblue;
padding: 10px;
color: #fff;
}
.box span {
position: absolute;
width: 0px;
height: 0px;
right: -20px;
top: 20px;
border: 10px solid transparent;
border-left-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<span></span>
<p>这是段对话，我是说话者，看看效果怎么样，应该还不错</p>
</div>
</body>
</html>
4. 绘制两条直角边不等长的三角形
实现如下效果
实现思路，我们只需要拼出右侧的图形，然后将其设置绝对定位放到左边的红色矩形中就可以
我们依然可以通过三角形来实现
.box {
width: 0px;
height: 0px;
border-top: 50px solid pink;
border-right: 50px solid red;
border-bottom: 50px solid blue;
border-left: 50px solid green;
}
首先对于这个代码进行修改，当四个边框一样大的时候，出来的图形就很好理解
当我们将border-top设置为100px的时候，就会变成下面这种情况，可以看到上侧被拉长了，我们需要的图形就是右侧三角形的上半部分，因此我们可以把下边框的宽度设置为0
我们就得到了需要的三角形，将其他两个边框隐藏后就可以得到最后需要的图形
最后生成的图形如下，css代码：
.box {
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-right: 50px solid red;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
}
对其进行简化可以为：
.box {
width: 0px;
height: 0px;
/*顺序仍然是上右下左*/
border-color: transparent red transparent transparent;
border-width: 100px 50px 0px 0px;
border-style: solid;
}
![[vue学习笔记]数组+事件+v-model的使用](https://img-blog.csdnimg.cn/c13a9b4b823344edbf9e9e418e747f9b.png)
![[附源码]计算机毕业设计高校实验室仪器设备管理系统Springboot程序](https://img-blog.csdnimg.cn/8210a349a7264df78c15ac9e589c3507.png)