css3实现优惠券

最新推荐文章于 2023-12-30 15:05:02 发布

wweTHEUT

最新推荐文章于 2023-12-30 15:05:02 发布

阅读量292

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/wweTHEUT/article/details/114333721

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style>
      .stamp {
        width:387px;height:140px;
        padding:0 10px;
        position: relative;
        overflow: hidden;
        margin:auto;
      }
      .stamp::before {
        content:'';
        position:absolute;z-index: -1;
        top:0;bottom: 0;
        left:10px;right:10px;
      }
      .stamp::after{
        content:'';
        position:absolute;z-index: -2;
        left:10px;top:10px;right:10px;bottom: 10px;
        box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
      }
      .stamp i {
        position:absolute;
        left:20%;top:45px;
        height:190px;width:390px;
        background-color: rgba(255,255,255,.15);
        transform: rotate(-30deg);
      }
      .stamp .bar{
        float:left;
        padding:16px 15px;
        width:220px;
        border-right: 2px dashed rgba(255,255,255,.3);
      }
      .stamp .copy {
        display: inline-block;width:100px;
        vertical-align: text-bottom;
      }

      .stamp_yellow {
        background:#F39B00;
        background: radial-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 5px,#F39B00 5px);
        background-size: 15px 15px;
        background-position: 9px 3px;

      }
      .stamp_yellow::before{
        background-color: #F39B00;
      }

    </style>
	</head>
	<body>
    <div class="stamp stamp_yellow">
       <div class="bar">
         <p>上品折扣店</p>
         <sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
         <p>订单满100.00元</p>
       </div>
       <div class="copy">副券
         <p>2020-06-01<br/>
           2020-06-18
         </p>
         <a href="#">立即使用</a>
         <i></i>
       </div>
    </div>
	</body>
</html>

wweTHEUT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css3实现优惠券

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .stamp { width:387px;height:140px; padding:0 10px; position: relative; overflow: hidden;.
复制链接

扫一扫