欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

一个用CSS实现的缎带效果代码

程序员文章站 2022-04-07 15:30:25
...

在学习css的时候，写出来一个CSS缎带效果，感觉还不错，下面小编就来带你们了解一下 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.ribbon-content {
	border: 1px solid #DDD;
	font-weight: bold;
	margin: 0 -10px;
	min-height: 30px;
	padding: 7px 31px;
	text-align: center;
	line-height: 30px;
}
.ribbon-left {
	display: block;
	border-left: 10px solid white;
	border-top: 8px solid #EEE;
	float: left;
	height: 0;
	margin-left: -10px;
	width: 0;
}
.ribbon-right {
	display: block;
	border-right: 10px solid white;
	border-top: 8px solid #EEE;
	float: right;
	height: 0;
	margin-right: -10px;
	width: 0;
}
</style>
</head>
<body>
<p style="margin: 0 auto; width: 200px;">
	<p class="ribbon" style="background: whiteSmoke;">
		<p class="ribbon-content" style="background: whiteSmoke;">标题</p>
		<p class="ribbon-left"></p>
		<p class="ribbon-right"></p>
	</p>
	<p style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</p>
</body>
</html>

2. [图片] 捕获.JPG

一个用CSS实现的缎带效果代码

以上就是一个用CSS实现的缎带效果代码的详细内容，更多请关注其它相关文章！

相关标签： CSS，缎带效果

上一篇： JavaScript中关于事件的简单详述

下一篇： 分享利用CSS生成小圆点图案代码

推荐阅读