CSS丝带

准备弄一个好看的丝带，用来镶嵌语音阅读按钮

整半天，发现一款挺合适！

CSS代码如下

.ribbon-1 {
	position: absolute;
	left: -8px;
	top: 15%;
	width: 150px;
	height: 50px;
	background-color: #00afee;
	/* 内容居中*/
	display: flex;
	justify-content: center;
	align-items: center;
	&
	::before, &
	::after {
	content: "";
	position: absolute;
}
&
	::before {
	top: -8px;
	left: 0;
	height: 0;
	width: 0;
	border-bottom: 8px solid #00afee;
	border-left: 8px solid transparent;
	opacity: .8;
}
&
	::after {
	right: -15px;
	height: 0;
	width: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 15px solid #00afee;
}
}

调用代码如下

<div class="ribbon-1"> 丝带 </div>

 

效果如下

原文链接：https://www.mymoye.com/519/，转载请注明出处。