css外圆角实现方法

最新推荐文章于 2024-05-23 00:00:00 发布

認真的雪

最新推荐文章于 2024-05-23 00:00:00 发布

阅读量3.6k

点赞数 14

本文链接：https://blog.youkuaiyun.com/w_ang_y_i/article/details/121232578

版权

html 专栏收录该内容

5 篇文章

订阅专栏

这篇博客通过HTML和CSS展示了如何创建一个具有特定底部圆角的矩形div，并利用伪元素`::before`和`::after`添加两侧的渐变效果，实现了一个独特的图形设计。

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

一个div实现下边图形

在这里插入图片描述
html

	<div class="bg3"> </div>

css

	.bg3 {
		width: 200px;
		height: 80px;
		border-radius: 30px 30px 0 0;
		background: #00CAF5;
		position: relative;
		left: 50px;
	}
	.bg3::after{
		content: '';
		position: absolute;
		left: -30px;
		bottom: 0;
		width: 30px;
		height: 30px;
		background: radial-gradient(circle at 0% 0%,transparent 30px,#00caf5 0)
	}
	.bg3::before{
		content: '';
		position: absolute;
		right: -30px;
		bottom: 0;
		width: 30px;
		height: 30px;
		background: radial-gradient(circle at 100% 0%,transparent 30px,#00caf5 0)
	}