纯CSS实现段落标题的矩形阴影

今早在手机上读新闻时发现一个效果,感觉这应该是纯CSS实现的,弄到电脑浏览器一看果然是。点击查看原页面 CSS段落标题阴影 看源码后自己实现一遍。
分解截图,这效果可分为三部分。文字背景,阴影三角形,虚线下划线。

第一步创建文字背景

<style>  
.wrapper{display:inline-block;width:100%}
.title{background:#3be;padding:5px 15px;color: #fff;max-width: 100%;line-height: 18px;height: 18px;float: left;}
</style>

<div class="wrapper">  
  <div class="title">标题矩形阴影</div>
</div>  

效果如下:

标题矩形阴影

第二部制作三角形

用纯CSS制作三角形的原理,之前的文章有提到过。CSS绘制三角形箭头。这里的黑色阴影是个等腰直角三角形。

<style>  
.wrapper{display:inline-block;width:100%}
.title{background:#3be;padding:5px 15px;color: #fff;max-width: 100%;line-height: 18px;height: 18px;float: left;}
.shadow{border:#666 solid 7px;border-right-color: transparent;border-bottom-color:transparent;float:left;position:relative;top:14px;}
</style>

<div class="wrapper">  
  <div class="title">标题矩形阴影</div>
  <div class="shadow"></div>
</div>  

效果如下:

标题矩形阴影

第三部弄虚线

<style>  
.wrapper{display:inline-block;width:100%}
.title{background:#3be;padding:5px 15px;color: #fff;max-width: 100%;line-height: 18px;height: 18px;float: left;}
.shadow{border:#666 solid 7px;border-right-color: transparent;border-bottom-color:transparent;float:left;position:relative;top:14px;}
.dash{border-bottom: dashed 1px #3be;margin-top: 27px;width: 100%;}
</style>

<div class="wrapper">  
  <div class="title">标题矩形阴影</div>
  <div class="shadow"></div>
  <div class="dash"></div>
</div>  

效果如下:

标题矩形阴影

简化版

使用CSS伪元素after可以精简代码。

<style>  
.wrapper{display:inline-block;width:100%}
.title{position:relative; background:#3be;padding:5px 15px;
color: #fff;max-width: 100%;  
line-height: 18px;height: 18px;display:inline-block}  
.title:after{content:' ';border:#666 solid 7px;
border-right-color: transparent;  
border-bottom-color:transparent;  
position:absolute;top:14px;right: -14px;}  
.wrapper:after{content:' ';display:block;
border-bottom: dashed 1px #3be;  
width: 100%;position: relative;top: -1px;}  
</style>

<div class="wrapper">  
  <div class="title">标题矩形阴影</div>
</div>