小DEMO：css制作圆滑梯形按钮

最新推荐文章于 2024-07-09 15:59:19 发布

不怕麻烦的鹿丸

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量336

点赞数

分类专栏： HTML5 CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_31851435/article/details/134424618

版权

HTML5 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

代码：

<div class="pull-btn-box">
	<div class="pull-btn">
		<svg width="12" height="12">
			<path d="M0 0 L6 11 L12 0" stroke="#A6A6A6" stroke-width="2" fill="none"/>
	    </svg>
	</div>
</div>

.pull-btn-box {
	position: absolute;
	top: 1px;
	left: 50%;
	transform: translate(-50%, -100%);
	.pull-btn {
		cursor: pointer;
		position: relative;
		border: 2px solid #D8D8D8;
		border-radius: 10px 10px 0 0;
		width: 84px;
		height: 45px;
		background-color: white;
		transform-origin: center bottom;
		transform: perspective(80px) rotateX(50deg);
		border-bottom: none;
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			width: 18px;
		}
		&::before {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			bottom: 0;
			left: -10px;
			background: radial-gradient(circle at 0 0, transparent 8px 0, #D8D8D8 8px 0, #D8D8D8 10px 0, white 10px 0,);
		}
		&::after {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			bottom: 0;
			right: -10px;
			background: radial-gradient(circle at 100% 0, transparent 8px 0, #D8D8D8 8px 0, #D8D8D8 10px 0, white 10px 0,);
		}
	}
}