一、css画三角形
参考：https://blog.csdn.net/weixin_36270908/article/details/98947183
核心重点：给一个div，设置宽高为0，设置border加粗、有颜色或透明
效果：
代码：
二、css画梯形
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<title>css3绘制三角形</title>
<style type="text/css">
/* css3绘制梯形 */
.tiXing1{
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-right: #ffa43f 200px solid;
margin-left: 400px;
}
.tiXing2{
width: 0px;
height: 0px;
border-top: 200px solid #ffa43f;
border-left: #ffa43f 200px solid;
}
.tiXing3{
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-left: #ffa43f 200px solid;
}
div{
float: left; /* 设置在一行上 */
}
</style>
</head>
<body>
<div class="tiXing1"></div>
<div class="tiXing2"></div>
<div class="tiXing3"></div>
</body>
</html>
三、css画圆
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<title>css3绘制三角形</title>
<style type="text/css">
/* css3绘制梯形 */
.tiXing1{
width: 0px;
height: 0px;
border: #ffa43f 100px solid;
}
.tiXing2{
width: 0px;
height: 0px;
border: #c96eff 100px solid;
}
.tiXing3{
width: 0px;
height: 0px;
border: #ffee47 100px solid;
}
#fatherDiv{
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
wdith:100%;
height:100vh;
align-items: center;
/*wdith:100%; height:100vh; 必须有才能使用align-items*/
}
#Circle{
/*外圆设置居中*/
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
wdith:100%;
height:100vh;
align-items: center;
/*wdith:100%; height:100vh; 必须有才能使用align-items*/
border: #ffa43f 2px solid;
border-radius: 50%;
width: 200px;
height: 200px;
}
#Circle1{
border: #ffa43f 2px solid;
border-radius: 50%;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="fatherDiv">
<div class="tiXing1"></div>
<div class="tiXing2"></div>
<div class="tiXing3"></div>
<div id="Circle">
<div id="Circle1"></div>
</div>
</div>
</body>
</html>
四、垂直居中flex实现
1、多个div一行并水平居中：
float: left;
margin-left: Px;
2、多个div一行并水平居中：
display: flex;
justify-content: center;
3、单个div水平居中：
margin: 0 auto;
4、多个div水平居中垂直居中
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
wdith:100%;
height:100vh;
align-items: center;
/*wdith:100%; height:100vh; 必须有才能使用align-items*/
参考：https://www.runoob.com/w3cnote/flex-grammar.html
https://www.cnblogs.com/echolun/p/11299460.html