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>

  • 相关阅读:
    包含中文的js文件在从cdn搞到本地时造成的问题;
    查询杀死进程
    二维码显示在网页上
    二维码生成器和解析器-java
    N个任务,分配给M个人,那么每个人得到的任务数量----总结经验
    js中文转换成拼音
    Grails连接mysql数据库
    Grails框架+Intellij IDEA工具,写了一个对字符串进行转码,包括纯js转成Base64格式
    java冒泡排序
    对文字简单的加密解密
  • 原文地址:https://www.cnblogs.com/zjz666/p/13048560.html
Copyright © 2011-2022 走看看