缺角矩形

PPT中的形状缺角矩形
image.png
PPT中效果：
image.png

代码实现效果：
image.png

  1. <div class="zhui-alert-wrapper">
  2.   <div class="zhui-alert-inner">天青色等烟雨</div>
  3. </div>
  4. .zhui-alert-wrapper {
  5.         position: relative;
  6.         display: inline-block;
  7.         width: 30px;
  8.         min-height: 100px;
  9.         font-size: 12px;
  10.         border-radius: 3px;
  11.         background: radial-gradient(circle at bottom left, transparent 7.5px, #fff 8px) 0 100%, radial-gradient(circle at top left, transparent 7.5px, #fff 8px) 0 0, radial-gradient(circle at top right, transparent 7.5px, #fff 8px) 100% 0, radial-gradient(circle at bottom right, transparent 7.5px, #fff 8px) 100% 100%;
  12.         background-size: 51% 51%;
  13.         background-repeat: no-repeat;
  14.         -webkit-filter: drop-shadow(0 0 1px #ff6347);
  15.         filter: drop-shadow(0 0 1px #ff6347);
  16.         padding: 3px;
  17.     }
  19.     .zhui-alert-inner {
  20.         font-family: STKaiti;
  21.         display: -webkit-box;
  22.         display: -ms-flexbox;
  23.         display: flex;
  24.         -webkit-box-pack: center;
  25.         -ms-flex-pack: center;
  26.         justify-content: center;
  27.         -webkit-box-align: center;
  28.         -ms-flex-align: center;
  29.         align-items: center;
  30.         width: 30px;
  31.         min-height: inherit;
  32.         margin: 0 auto;
  33.         padding: 12px 8px;
  34.         word-wrap: break-word;
  35.         text-align: center;
  36.         -webkit-box-sizing: border-box;
  37.         box-sizing: border-box;
  38.         background: radial-gradient(circle at bottom left, transparent 7.5px, #fff 8px) 0 100%, radial-gradient(circle at top left, transparent 7.5px, #fff 8px) 0 0, radial-gradient(circle at top right, transparent 7.5px, #fff 8px) 100% 0, radial-gradient(circle at bottom right, transparent 7.5px, #fff 8px) 100% 100%;
  39.         background-size: 51% 51%;
  40.         background-repeat: no-repeat;
  41.         -webkit-filter: drop-shadow(0 0 0.8px #ff6347);
  42.         filter: drop-shadow(0 0 0.8px #ff6347);
  43.         color: #ff6347;
  44.     }

对联

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <title>zhui ui notice</title>
  10.     <style>
  11.         .zhui-notify-inner {
  12.             position: relative;
  13.             float: left;
  14.             width: 30px;
  15.             padding: 10px 8px;
  16.             text-align: center;
  17.             -webkit-animation: unfold .3s linear;
  18.             animation: unfold .3s linear;
  19.             overflow: hidden;
  20.             outline: 1px solid #f7c985;
  21.             outline-offset: -4px;
  22.             background-image: radial-gradient(tan .4px, transparent 1px), radial-gradient(tan .4px, transparent 1px);
  23.             background-size: 30px 30px;
  24.             background-position: 20px 15px, -4px 0;
  25.         }
  27.         .zhui-notify-light {
  28.             background-color: #d41d25;
  29.         }
  30.     </style>
  31. </head>
  33. <body>
  34.     <div class="zhui-notify-inner zhui-notify-light"><span>
  35.         南风知我意吹梦到西洲
  36.     </span></div>
  37. </body>
  39. </html>

image.png

纯CSS小图标预览与代码复制

https://www.zhangxinxu.com/sp/icon/css.php

image.png

参考