不规则div之<div两垂直边向里凹陷>_vue div边框线如何向内凹近-优快云博客

本文介绍如何使用CSS3的::before和::after伪元素实现垂直边向内凹陷的效果，通过调整绝对定位及边框样式实现复杂布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天公司网站上要做一个页面，设计图就有设计到垂直边向里凹陷的很多块，而且这些块高度是不一致，如果直接切图来做背景很不现实，还是得用样式来实现这个效果。下面就来记录一下实现的方法，以便自己以后重用。如果你看到了这篇文章，也希望你能给我一些好的建议。（对于IE只适用于IE9）

源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>div两垂直边向里凹陷</title>

<style type="text/css">
	.testdiv,.testdiv2{
		position: relative;
		margin: 0 auto;
		margin-top: 30px;
		width: 200px;
		height: 200px;
		background: yellow;
		text-align: center;
	}
	.content{
		margin: 0 auto;
		background: yellow;
		width: 150px;
		height: 190px;
		padding: 5px;
	}
	.testdiv::before,.testdiv2::before{
		position: absolute;
		left: -15px;
		top: 0;
		display: block;
		content: '我是前面';
		background: #fff; 
		width: 30px;
		height: 100%;  /*高度为100%，与父元素相等*/
		border-radius: 50%;
	}
	.testdiv::after,.testdiv2::after{
		position: absolute;
		left: 185px;
		top: 0;
		display: block;
		content: '我是后面';
		background: #fff; 
		width: 30px;
		height: 100%;  <span style="font-family: Arial, Helvetica, sans-serif;">/*高度为100%，与父元素相等*/</span>
		border-radius: 50%;
	}
	.testdiv2::before,.testdiv2::after{
		background-color: red;
	}
</style>
</head>

<body>

<div class="testdiv">
	<div class="content">
		我是实验框实验框<br />
		我是实验框实验框<br />
		我是实验框实验框<br />
		我是实验框实验框<br />
		我是实验框实验框<br />
	</div>
</div>
<div class="testdiv2">我是实验框</div>

</body>
</html>

效果：

实现原理：

css3中的 ::before 和 ::after 选择器在被选元素的内容前面插入内容。

::before 选择器在被选元素的内容前面插入内容

::after 选择器在被选元素的内容后面插入内容
.testdiv::before,.testdiv2::before{
		position: absolute;
		left: -15px;
		top: 0;
		display: block;
		content: '我是前面';
		background: #fff; 
		width: 30px;
		height: 100%;
		border-radius: 50%;
	}