1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      css 11种方法实现一个tips带有描边的小箭头

        发布时间2019-02-21 16:49:58   作者w3cbest   我要评论

      这篇文章主要介绍了css 11种方法实现一个tips带有描边的小箭头,文中通过示例代码介绍的非常详细对大家的学习或者工作具有一定的参考学习价值需要的朋友们下面随着小编来一起学习学习吧

      我们在网页开发中实现一个tips时会有一个小箭头实现这种方法的文章网上已经泛滥了但有时实现这个小箭头不止只有单纯的三角它还有描边今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边本章不涉及svg/canvas没必要因为我讲的是css

      主体样式

      <div class="dui-tips"><a href="http://www.w3cbest.com">w3cbest我是一个tips</a></div>
       .dui-tips{
              position: relative;
              padding: 10px;
              text-align: center;
              border: 1px solid #f60;
              border-radius: 5px;
              background-color: #fff;
          }
      
      

      第一种border描边双层覆盖

      就是大?#39029;?#29992;的border实现原理就是给其中一条边设置颜色宽度及样式我这里使用了两个伪类进行折叠将一个白色的覆盖在有颜色的伪类上面再偏移1px来模拟实现1px的描边效果代码如下

      .dui-tips {
          &:before, &:after {
              position: absolute;
              left: 50%;
              display: table;
              width: 0;
              height: 0;
              content: '';
              transform: translate(-50%, 0);
              border-width: 10px 10px 0 10px;
              border-style: solid;
          }
          &:before {
              z-index: 0;
              bottom: -10px;
              border-color: #f60 transparent transparent transparent;
          }
          &:after {
              z-index: 1;
              bottom: -8px;
              border-color: #fff transparent transparent transparent;
          }
      }

      第二种border描边结?#19979;?#38236;drop-shadow属性

      第二种是第一种的延伸使用滤镜filter的drop-shadow描边来实现box-shadow和drop-shadow实现不规则投影

      .dui-tips {
          &:after {
              position: absolute;
              left: 50%;
              display: table;
              width: 0;
              height: 0;
              content: '';
              transform: translate(-50%, 0);
              border-width: 10px 10px 0 10px;
              border-style: solid;
      
              bottom: -9px;
              border-color: #fff transparent transparent transparent;
              filter: drop-shadow(0px 2px 0px #f60);
          }
      }

      第三种通过特殊符号或字体双层覆盖

      第三种方法和第一种类似通过?#35762;?#39068;色叠加在有层级的偏移来实现

      .dui-tips {
          &:before, &:after {
              font-size: 24px;
              line-height: 18px;
              position: absolute;
              left: 50%;
              display: table;
              content: '';
              transform: translate(-50%, 0);
              text-align: center;
          }
          &:before {
              z-index: 0;
              bottom: -10px;
              color: #f60;
          }
          &:after {
              z-index: 1;
              bottom: -8px;
              color: #fff;
          }
      }

      第四种通过text-shadow实现

      这种放发通过给文子设置1px的阴影来显描边效果

      .dui-tips {
          &:after {
              font-size: 24px;
              line-height: 18px;
              position: absolute;
              left: 50%;
              display: table;
              content: '';
              transform: translate(-50%, 0);
              text-align: center;
      
              z-index: 1;
              bottom: -8px;
              color: #fff;
              text-shadow: 0 2px 0 #f60;
          }
      }

      第五种 background双层覆盖

      这种方式设置两个宽度和高度分别为10px的方块背景再给?#35762;?#32972;景分别设置不同的颜色再通过?#35762;?#32972;景颜色叠加经过层级偏移再有transform的rotate属性旋转角度来实现箭头的朝向

      .dui-tips {
          &:before, &:after {
              position: absolute;
              left: 50%;
              display: table;
              width: 10px;
              height: 10px;
              content: '';
              margin-left: -5px;
              transform: rotate(-45deg);
          }
          &:before {
              z-index: 0;
              bottom: -6px;
              background-color: #f60;
          }
          &:after {
              z-index: 1;
              bottom: -5px;
              background-color: #fff;
          }
      }

      第六种background和border背景描边旋转

      此方法就是设置一个宽度和高度分别为10px的方块背景然后背景相邻的?#25945;?#36793;描边再有transform的rotate属性旋转角度来实现箭头的朝向

      .dui-tips {
          &:after {
              position: absolute;
              left: 50%;
              display: table;
              width: 10px;
              height: 10px;
              margin-left: -5px;
              content: '';
              transform: rotate(-45deg);
      
              z-index: 1;
              bottom: -6px;
              border-bottom: 1px solid #f60;
              border-left: 1px solid #f60;
              background-color: #fff;
          }
      }

      第七种background和box-shadow

      .dui-tips {
          &:after {
              position: absolute;
              left: 50%;
              display: table;
              width: 10px;
              height: 10px;
              content: '';
              margin-left: -5px;
              transform: rotate(-45deg);
      
              z-index: 1;
              bottom: -5px;
              background-color: #fff;
              box-shadow: -1px 1px 0 #f60;
          }
      }

      第八种linear-gradient

      .dui-tips{
          &:before, &:after{
              position: absolute;
              left: 50%;
              display: table;
              width: 10px;
              height: 10px;
              content: '';
              margin-left: -5px;
              transform: rotate(-135deg);
          }
          &:before {
              z-index: 0;
              bottom: -6px;
              background: linear-gradient(-45deg, transparent 7px, #f60 0);
          }
          &:after {
              z-index: 1;
              bottom: -5px;
              background: linear-gradient(-45deg, transparent 7px, #fff 0);
          }
      }

      第九种linear-gradient和box-shadow

      .dui-tips{
          &:after{
              position: absolute;
              left: 50%;
              display: table;
              width: 10px;
              height: 10px;
              content: '';
              margin-left: -5px;
              transform: rotate(-135deg);
      
              z-index: 1;
              bottom: -5px;
              background: linear-gradient(-45deg, transparent 7px, #fff 0);
              box-shadow: -1px -1px 0 #f60
          }
      }

      第十种linear-gradient和border

      .dui-tips{
          &:after{
              position: absolute;
              left: 50%;
              display: table;
              width: 10px;
              height: 10px;
              content: '';
              margin-left: -5px;
              transform: rotate(-135deg);
      
              z-index: 1;
              bottom: -6px;
              background: linear-gradient(-45deg, transparent 7px, #fff 0);
              border-top: 1px solid #f60;
              border-left: 1px solid #f60;
          }
      }
      
      

      第十一种ouline

      .dui-tips {
          &:before, &:after {
              position: absolute;
              left: 50%;
              display: table;
              width: 0;
              height: 0;
              content: '';
              transform: rotate(45deg);
              outline-style: solid;
              outline-width: 5px;
          }
          &:before {
              z-index: 0;
              bottom: -1px;
              outline-color: #f60;
          }
          &:after {
              z-index: 1;
              bottom: 0;
              outline-color: #fff;
          }
      }
      

      以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家

      相关文章

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>