纯CSS3实现彩色缎带效果
<!DOCTYPE HTML>
<html>
<head>
<title>石家庄伸缩门</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 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> 相关推荐
myloveqiqi 2020-08-09
AlisaClass 2020-07-19
大象从不倒下 2020-07-31
猫沙盆 2020-07-08
猫沙盆 2020-07-07
云端漂移 2020-07-06
xiaohuli 2020-06-11
葉無聞 2020-06-09
淡风wisdon大大 2020-06-06
福叔 2020-06-02
CaiKanXP 2020-06-02
opspider 2020-05-29
guicaizhou 2020-05-06
jiangfulai 2020-04-11
buttonChan 2020-04-10
jiedinghui 2020-02-20