ToB企服应用市场:ToB评测及商务社交产业平台

标题: css实现antd丝带效果 [打印本页]
作者: 篮之新喜    时间: 2024-11-5 06:32
标题: css实现antd丝带效果
先上效果图：

代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .ant-ribbon {
  11.         box-sizing: border-box;
  12.         margin: 0;
  13.         padding: 0 8px;
  14.         color: #1677ff;
  15.         font-size: 14px;
  16.         line-height: 22px;
  17.         list-style: none;
  18.         position: absolute;
  19.         top: 8px;
  20.         white-space: nowrap;
  21.         background-color: #1677ff;
  22.         border-radius: 4px;
  23.         border-end-end-radius: 0;
  24.     }
  26.     .ant-ribbon-text {
  27.         color: #ffffff;
  28.     }
  30.     .ant-ribbon-placement-end {
  31.         inset-inline-end: 8px;
  32.         border-end-end-radius: 0;
  33.     }
  35.     .ant-ribbon-corner {
  36.         position: absolute;
  37.         top: 100%;
  38.         width: 8px;
  39.         height: 8px;
  40.         color: currentcolor;
  41.         border: 4px solid;
  42.         transform: scaleY(0.75);
  43.         transform-origin: top;
  44.         filter: brightness(75%);
  45.         box-sizing: border-box;
  46.         inset-inline-end: 0;
  47.         border-inline-end-color: transparent;
  48.         border-block-end-color: transparent;
  49.     }
  51. </style>
  53. <body>
  54.     <div class="ant-ribbon ant-ribbon-placement-end">
  55.         <span class="ant-ribbon-text">5.17.0</span>
  56.         <div class="ant-ribbon-corner">
  57.         </div>
  58.     </div>
  59. </body>
  61. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4