您的位置：首页 > Web前端 > CSS

纯CSS3实现彩色缎带效果

2015-06-03 14:06 489 查看
<!DOCTYPE HTML>

<html>

<head>

<title>纯CSS3缎带效果</title>

<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><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<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;">内容显示区：这像不像一个彩缎的头部？<br>内容显示区内容显示区内容显示区内容显示区内容显示区内容显示区内容显示区</div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航