CSS缎带效果

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word左右居中纵向分布 word左右居中对齐 word左右居中对齐怎么设置 word标题回车后为正文 word标题回车后直接分页 word标题回车后中间空了好大一段 word里面行距怎么调整无法缩小 word里面行距一直很大 word里面行距怎么设置在哪里 word试卷格式文档怎么打印 word试卷格式排版 word中隐藏文字打印 word中隐藏文字快捷键 word中隐藏文字在哪里

专题更多>>

最新文章更多>>

我来自未来丶希望你懂我

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>
<div style="margin: 0 auto; width: 200px;">
	<div class="ribbon" style="background: whiteSmoke;">
		<div class="ribbon-content" style="background: whiteSmoke;">标题</div>
		<div class="ribbon-left"></div>
		<div class="ribbon-right"></div>
	</div>
	<div style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</body>
</html>