如何利用CSS伪类选择器实现三角形(空心和实心)

先来写个实心三角形

.box_right,.box_bottom {
				width: 200px;
				height: 120px;
				background: #fff;
				position: relative;
				border-radius: 10px;
			}
			.box_bottom:after {
				content: '';
				width: 0;
				height: 0;
				border-top: 15px solid #ffff;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				position: absolute;
				bottom: -15px;
				left: 90px;
			}
			.box_right:after {
				content: '';
				width: 0;
				height: 0;
				border-left: 15px solid #ffff;
				border-bottom: 10px solid transparent;
				border-top: 10px solid transparent;
				position: absolute;
				top: 50px;
				right: -15px;
			}

<div class="wrapper">
	<div class="box_top"></div>
	<div class="box_left"></div>
</div>

效果（三角形的宽度等于左边框的的宽度加上又边框的宽度，当三角形的方向朝上或者朝下的时候）
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191031111943808.png

再来个空心三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10.30_2测试</title>
		<style type="text/css">
			body,html {
				margin: 0;
				height: 100%;
			}
			.wrapper {
				height: 200px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background: #EDEDED;
			}
			.box_top,.box_left,.box_right,.box_bottom {
				width: 200px;
				height: 120px;
				background: #fff;
				position: relative;
				border-radius: 10px;
				border: 1px solid #333333;
			}
			.box_top:before {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 15px solid transparent;
				border-top: 15px solid transparent;
				border-right: 10px solid #fff;
				position: absolute;
				top: 45px;
				left: -9px;
				z-index: 3;
			}
			.box_top:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 15px solid transparent;
				border-top: 15px solid transparent;
				border-right: 10px solid #333333;
				position: absolute;
				top: 45px;
				left: -10px;
			}
			.box_left:before {
				content: '';
				width: 0;
				height: 0;
				border-left: 15px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 10px solid #fff;
				position: absolute;
				top: -9px;
				left: 85px;
				z-index: 3;
			}
			.box_left:after {
				content: '';
				width: 0;
				height: 0;
				border-left: 15px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 10px solid #333333;
				position: absolute;
				top: -10px;
				left: 85px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box_top"></div>
			<div class="box_left"></div>
		</div>
	</body>
</html>

效果（其实就是利用和dom背景色相同的伪类定为在与边框颜色相同的伪类上，从而实现了看起来是空心三角形的效果）这时三角形的高度同上
在这里插入图片描述

上面的伪类元素要和下面的伪类元素对应的定位值要有差值，这样就通过覆盖形成了空心三角形的效果

总结：不难发现，当你要实现某个方向的三角形，只需要将相反方向的border设置相应的颜色，相邻两边的border设置成透明（transparent），这样基本就大功告成了。
举个栗子：想实现向上的三角形，那么你只要设置border-bottom成你要的颜色（和dom元素的背景色一致），border-left和border-right的颜色设置成透明（transparent）。再用定位调整一下三角形的位置就OK了。

溜了溜了，只想到了这么多，欢迎补充，谢谢大家~

原文链接：https://blog.csdn.net/kairry_/article/details/102834289