带箭头的div

带箭头的div

如果箭头不需要边框效果，一个元素搞定了

<s></s>

<i></i>

:before 或者 ：after （content："  "）  

都可以完成

 

如果需要边框效果，一般都是由两个元素，设置不同的颜色和显示位置，从而有了边框的效果

如：before和after一起使用

**  定义before-after选择器  **/
.before-after-common {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  z-index:1;
}
div.mini-table{
  background-color:#ebf5fd;
  /*overflow:hidden; 可以避免外边距合并但影响箭头显示*/
  position:relative;
  padding:0.5px 0px; /** avoid 外边距合并 **/
  &:before{
    .before-after-common;
    right: 22%;
    border-bottom-color: #ddd;
    border-width: 8px;
    
  }
  &:after{
    .before-after-common;
    right: 265;
    border-bottom-color: #ebf5fd;
    border-width: 7px; 
  }
}

上面为less代码。

--------------------------------------------------------------------

<s>

　　<i></i>

</s> 

这样也是可以实现的。

               

posted on 2015-10-22 17:29 Rhett_Web 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/rhett-web/p/4901707.html