CSS中灵活使用:before和:after

    border-right-color:black*/ /*这里设置右边边框色为黑色*/  

}  

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。

接下来我们加上:before：

CSS Code复制内容到剪贴板

<style>   

  .test-div{   

      position: relative;  /*日常相对定位*/  

      width:150px;   

      height:36px;   

      border-radius:5px;   

      border:black 1px solid;   

      background: rgba(245,245,245,1)   

  }   

  .test-div:before{   

      content: "";  /*:before和:after必带技能，重要性为满5颗星*/  

      display: block;   

      position: absolute;  /*日常绝对定位*/  

      top:8px;   

      width: 0;   

      height: 0;   

      border:6px transparent solid;   

      left:-12px;   

      border-right-color: rgba(245,245,245,1);   

  }   

</style>   

<div class="test-div"></div>  

通过以上代码，我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是，在对话框的四周的边框不是完整的，而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有，该怎么办呢？让召唤:after穿着棉大衣来救场吧~

完整代码：

CSS Code复制内容到剪贴板

<style>   

  .test-div{   

      position: relative;  /*日常相对定位*/  

      width:150px;   

      height: 36px;   

      border:black 1px solid;   

      border-radius:5px;   

      background: rgba(245,245,245,1)   

  }   

  .test-div:before,.test-div:after{   

      content: "";  /*:before和:after必带技能，重要性为满5颗星*/  

      display: block;   

      position: absolute;  /*日常绝对定位*/  

      top:8px;   

      width: 0;   

      height: 0;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!