zoukankan      html  css  js  c++  java
  • 带箭头的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> 

    这样也是可以实现的。

                   

  • 相关阅读:
    [JLOI2015] 管道连接
    【知识点】斯坦纳树
    [ZJOI2010] 网络扩容
    【知识点】网络流常见模型
    [NOI2009] 植物大战僵尸
    [NOI2007] 货币兑换
    【知识点】分治相关算法
    [NOI2005] 月下柠檬树
    [HNOI2012] 射箭
    [SDOI2014] 向量集
  • 原文地址:https://www.cnblogs.com/rhett-web/p/4901707.html
Copyright © 2011-2022 走看看