CSS缎带效果

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word怎样删除首页 word输入方法 word批量合并工具软件开发方法种类 32位怎么运行64位软件下载抽奖券制作公司一般用哪种编程软件安卓怎么设置软件开机自启安卓自启管理软件 word对齐方式属于 word组织结构图大小 curlpassword=@ word2016拼页安装软件手机安装软件

专题更多>>

最新文章更多>>

我来自未来丶希望你懂我

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>