这是我参与「4月日新计划更文活动」的第14天。
我们今天讲一下如何用css画一个三角形。
先来分析一下这个功能怎么实现哈。
这是一个很常见的功能，
一般会用在一些特殊形状的标题上，用来做拼接。
基础的实现方式就是通过画一个宽高都是0的，边框为50px的正正方形，然后通过控制这个正方形的四个方向，其他三个方向的背景颜色设置为透明，只有一个方向设置为具体的颜色，就可以了。
在现实场景中，可能还需要稍微做一下旋转，才能达到产品的要求。
话不多说，先看效果，然后上代码。
代码如下：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box {
position: absolute;
left: 100px;
top: 100px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-left-color: orange;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
根据上面的效果，稍作修改，进行倒角，就可以实现一个扇形。
代码如下：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box {
position: absolute;
left: 100px;
top: 100px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-left-color: orange;
border-radius: 50%;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
同时，如果我想把这个扇形的位置摆放端正一点，可以顺时针旋转45度就可以实现。
效果如下：
看代码：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box {
position: absolute;
left: 100px;
top: 100px;
width: 0px;
height: 0px;
border: 50px solid transparent;
border-left-color: orange;
border-top-color: burlywood;
border-radius: 50%;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>
</html>
通过一些样式的简单变换，就能获得我们想要的很多好玩的效果。
其实学会了css也能干很多事情啦。
回顾今天的学习，也是很开心的，把今天的学习笔记发布到掘金上，开心。
以上就是我今天学习的如何用css画三角形的知识点。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
