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>

  • 相关阅读:
    Fegin参数使用总结
    navicat彻底卸载
    VM虚拟机win10无法联网,DNS配置问题
    Navicat15的安装及破解
    Docker 配置国内镜像源拉取prometheus,解决prometheus拉取特别慢的问题
    python中faker(生成随机数据)
    初探移动网站的架构和设计
    利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
    响应式Web设计(三):响应式Web设计的方法
    响应式Web设计(四):响应式Web设计的优化
  • 原文地址:https://www.cnblogs.com/zjz666/p/13048560.html
Copyright © 2011-2022 走看看