zoukankan      html  css  js  c++  java
  • [SASS] Make a responsive arrow box

    Check the page:
    http://www.cssarrowplease.com/

    In HTML: {{type}} is tow way binding in Angular, three types: text, data, voice

    <div class="chart-area {{type}} arrow_box">

    SASS:

    According to different media and class type, change the position :

    @mixin respond-to($type: min-width, $query: 960px) {
      @media ($type: $query) {
        @content;
      }
    }
    
    .arrow_box {
      padding: 5px;
      position: relative;
      background: #FFF !important;
      border: 2px solid #FFBE00;
    }
    .arrow_box:after, .arrow_box:before {
      bottom: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    
    .voice.arrow_box:after, .voice.arrow_box:before {
      left: 10%;
      @include respond-to(max-width, 599px) {
        left: 15%;
      }
    }
    .text.arrow_box:after, .text.arrow_box:before {
      left: 30%;
      @include respond-to(max-width, 599px) {
        left: 50%;
      }
    }
    .data.arrow_box:after, .data.arrow_box:before {
      left: 50%;
      @include respond-to(max-width, 599px) {
        left: 85%;
      }
    }
    
    .arrow_box:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #FFF;
      border-width: 20px;
      margin-left: -20px;
    }
    .arrow_box:before {
      border-color: rgba(255, 190, 0, 0);
      border-bottom-color: #FFBE00;
      border-width: 23px;
      margin-left: -23px;
    }
  • 相关阅读:
    MySql 免安装配置
    MySql 语句优化的几个小建议
    Sharding-JDBC 公共表
    Sharding-JDBC 垂直分库
    Sharding-JDBC 水平分库
    Vuejs基础使用
    webpack配置开发环境和生产环境
    webpack常见应用
    webpack-用loader加载css样式、图片、字体、数据
    webpack核心概念-模式/loader/插件及其他
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5218905.html
Copyright © 2011-2022 走看看