Css实现右上角飘带效果

最新推荐文章于 2023-10-13 17:08:46 发布

_江屿_

最新推荐文章于 2023-10-13 17:08:46 发布

阅读量467

点赞数

分类专栏： Css 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_52191385/article/details/132914680

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图：

源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0 auto;
        padding: 0;
      }
      .wrap {
        /* 设置宽高 */
          width: 350px;
          height: 150px;
          text-align: center;
          position: relative; /* 父元素相对定位 */
          overflow: hidden;
          background-color: #160e41; /* 背景颜色 */
        border: 1px solid #16f5e6;
      }
      
      .ribbon {
        /* 右上角飘带 */
        background-color: #54CBFF; /* 左上角飘带的背景颜色 */
        overflow: hidden;
        white-space: nowrap; /* 文字不换行*/
        position: absolute; /* 绝对定位 */
        right: -40px;
        top: 10px;
        transform: rotate(45deg);   /* 旋转45°*/
        box-shadow: 0 0 10px #888; /* 飘带的阴影*/
      }
      
      .ribbon span {
        border: 1px solid #54CBFF;
        color: #fff;
        display: block;
        font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
        margin: 1px 0;
        padding: 5px 50px;
        text-align: center;
        text-shadow: 0 0 5px #444;
      }

    </style>
  </head>
  <body>
    <div class='wrap'>
        <div class='ribbon'>
            <span>NEW</span>
        </div>
    </div>
  </body>
</html>