使用::after伪元素画C型半圆环，适用于拐弯-CSDN博客

本文链接：https://blog.csdn.net/qq_45432996/article/details/141561974

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
.element1{
	width: 100px;
	height: 200px;
}

.element1::after{
	content: "";
	display: block;
	width: 92px;
	height: 184px;
	border-radius: 84px 0 0 84px;
	border: 8px solid #409EFF;
	border-right: none;
	position: relative;
	top: 0px;
	left: 0px;
}
.element2{
	width: 100px;
	height: 200px;
}

.element2::after{
	content: "";
	display: block;
	width: 92px;
	height: 184px;
	border-radius: 0 84px 84px 0;
	border: 8px solid #409EFF;
	border-left: none;
	position: relative;
	top: 0px;
	left: 0px;
}
.element3{
	width: 80px;
	height: 160px;
}

.element3::after{
	content: "";
	display: block;
	width: 72px;
	height: 144px;
	border-radius: 0 84px 84px 0;
	border: 8px solid #409EFF;
	border-left: none;
	position: relative;
	top: 0px;
	left: 0px;
}
.element4{
	width: 80px;
	height: 160px;
}

.element4::after{
	content: "";
	display: block;
	width: 72px;
	height: 144px;
	border-radius: 84px 0 0 84px;
	border: 8px solid #409EFF;
	border-right: none;
	position: relative;
	top: 0px;
	left: 0px;
}
</style>
</head>
<body>
<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>
<div class="element4"></div>
</body>
</html>