css 三角形画法
作者：互联网
css 三角形画法
项目中，会有一些边角的位置使用的三角形的地方，这时候如果没有刻意改变，可使用 css 来实现。
使用 border 实现三角形的画法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>triangle 实现</title>
</head>
<style>
#triangle-up{ //向上三角形样式
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:60px #f00 solid;
}
#triangle-left{ //向左三角形样式
width:0px;
height:0px;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:60px #0f0 solid;
}
#triangle-right{ //向右三角形样式
width:0px;
height:0px;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:60px #00f solid;
}
#triangle-down{ //向下三角形样式
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:60px #f00 solid;
}
</style>
<body>
<div id="triangle-up"></div>
<br>
<div id="triangle-left"></div>
<br>
<div id="triangle-right"></div>
<br>
<div id="triangle-down"></div>
</body>
</html>
说明：（以向上三角形事例说明）
- html元素可以是块级元素，也可以是行级元素、行内元素；
- css 样式中, 类似将border分成了上下左右四块，每个三角形的实现都只用了三部分，另外一部分的样式则为 0；
- css样式中，缺少的那一部分的对立样式(如上对应下，左对应右)，则为设置三角形的高度和方向，其中高度的增加方向，是从尖头向平头的方向增加，而颜色则为三角形的背景色；
小小的积累，成就大大的收获！！！
标签：画法,solid,50px,三角形,0px,border,transparent,css 来源： https://blog.csdn.net/qq_43344133/article/details/90340587