不规则div之<div两垂直边向里凹陷>

最新推荐文章于 2023-07-28 17:42:54 发布

夏天的甲虫

最新推荐文章于 2023-07-28 17:42:54 发布

阅读量3.4k

点赞数 1

分类专栏： css 学习积累文章标签： css3 before after

本文链接：https://blog.csdn.net/u012076852/article/details/42102333

版权

学习积累同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

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

利用这两个选择器分别在被选中元素的前后插入一个块，利用css调整这两个块的样式，将被选中元素的垂直边遮挡，就形成了如效果图所示的“垂直边向里凹陷的效果”。

注意：
1、被选中的元素的position设置为relative相对定位；
2、插入的元素的position设置为absolute绝对定位。并将其垂直边利用border-radius设置为50%，形成弧形。再利用left调整其位置对被选中元素形成遮挡；

夏天的甲虫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
不规则div之<div两垂直边向里凹陷>

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

扫一扫

专栏目录