zoukankan      html  css  js  c++  java
  • bootstrap的三角方向符号实现

    实现方法:
    用空的内联块,宽度高度都设置成0,其中一边的边框设置成可见,其它三边边框设置成透明,再配合边框宽度,可见的边框就呈现成三角形。

    模拟代码:
    css部分:

    .caret-left > span {
      display: inline-block;
       0;
      height: 0;
      vertical-align: middle;
      margin-bottom: 0.1em;
      border-right: 0.4em dashed;
      border-top: 0.4em solid transparent;
      border-bottom: 0.4em solid transparent;
    }
    .caret-left:before {
      content:"";
    }
    .caret-right > span {
      display: inline-block;
       0;
      height: 0;
      vertical-align: middle;
      margin-bottom: 0.1em;
      border-left: 0.4em dashed;
      border-top: 0.4em solid transparent;
      border-bottom: 0.4em solid transparent;
    }
    .caret-right:before {
      content:"";
    }
    .caret-up > span {
      display: inline-block;
       0;
      height: 0;
      vertical-align: middle;
      margin-bottom: 0.1em;
      border-bottom: 0.4em dashed;
      border-left: 0.4em solid transparent;
      border-right: 0.4em solid transparent;
    }
    .caret-up:before {
      content:"";
    }
    .caret-down > span {
      display: inline-block;
       0;
      height: 0;
      vertical-align: middle;
      margin-bottom: 0.1em;
      border-top: 0.4em dashed;
      border-left: 0.4em solid transparent;
      border-right: 0.4em solid transparent;
    }
    .caret-down:before {
      content:"";
    }
    
    /* 辅助样式 */
    button {
    	border-radius: 3px;
    	background-color: #FFF;
    	border: 1px solid;
    	line-height: 2em;
    	min- 2em;
    }
    

    html部分:

    <button class="caret-left"><span></span></button>
    <button class="caret-right"><span></span></button>
    <button class="caret-up"><span></span></button>
    <button class="caret-down"><span></span></button>
    

    效果图:

    补充:

    用margin-bottom来调整底部偏移偶尔会出现底部的尖角被削掉一点儿,变成棱台形状,换成padding-bottom之后好了。

  • 相关阅读:
    Web全栈探索,Vue基础系列,前后端交互(四)
    幸运者
    整数加法
    猜数游戏
    multi-select 左右选择插件
    Layui 踩坑记录
    jQuery 封装公共方法
    前后端文件内容 md5 计算
    Apscheduler 定时任务
    Git 开发流程
  • 原文地址:https://www.cnblogs.com/omega8/p/4885617.html
Copyright © 2011-2022 走看看