zoukankan      html  css  js  c++  java
  • 优惠券排版

    
    

    一、优惠券

    .coupon{
           200px;
          height: 80px;      
          background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,
            radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,
            radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,
            radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;
          filter: drop-shadow(3px 3px 3px #c5c5c5);
     }

    二、气泡框

    <style>
    .bubble-tip {
       100px;
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
      border: 1px solid #c5c5c5;
      border-radius: 4px;
      position: relative;
      background-color: #fff;
    }
    .bubble-tip::before {
      content: "";
       0;
      height: 0;
      border-style: solid;
      border- 10px 10px 10px 0;
      border-color: transparent #ffffff transparent transparent;
      position: absolute;
      top: 5px;
      left: -10px;
      z-index: 2;
    }
    .bubble-tip::after {
      content: "";
       0;
      height: 0;
      border-style: solid;
      border- 10px 10px 10px 0;
      border-color: transparent #c5c5c5 transparent transparent;
      position: absolute;
      top: 5px;
      left: -11px;
      z-index: 1;
    }
    </style>
    <div class="bubble-tip"></div>

     三、三角形

      

    <style>
    .triangle {
       0;
      height: 0;
      border-style: solid;
      box-sizing: border-box;
      border- 0 10px 10px;
      border-color: transparent transparent #c5c5c5 transparent;
    }
    </style>
    <div class="triangle"></div>

    <style>
    .left-top-triangle {
       0;
      height: 0;
      border-style: solid;
      box-sizing: border-box;
      border- 10px;
      border-color: #c5c5c5 transparent transparent #c5c5c5;
    }
    </style>
    <div class="left-top-triangle"></div>

     四、五边形

    <style>
    .pentagon {
       54px;
      position: relative;
      border- 50px 18px 0;
      border-style: solid;
      border-color: #c5c5c5 transparent;
    }
    
    .pentagon::before {
      content: "";
      position: absolute;
       0;
      height: 0;
      top: -85px;
      left: -18px;
      border- 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #c5c5c5;
    }
    </style>
    <div class="pentagon"></div>

  • 相关阅读:
    使用slot-scope复制vue中slot内容
    pre-commit钩子,代码质量检查
    vue 顶级组件
    Vue源码探究-事件系统
    vue 配置多页面应用
    vuex commit保存数据技巧
    在VUE中,关于CKEditor使用
    使用el-checkbox实现全选,点击失效没有反应
    vue组件之间的通信
    不做Next,争做Nest——庆科首届智能硬件创新设计大赛产生决赛12强
  • 原文地址:https://www.cnblogs.com/zjz666/p/13048560.html
Copyright © 2011-2022 走看看