css实现徽章缎带

maliangcoder · maliangcoder · commit 5b4b269bfd17 · 2023-05-26T22:14:27.000+08:00
diff --git a/常用的CSS主流布局案例(1~8)/53_徽章缎带.html b/常用的CSS主流布局案例(1~8)/53_徽章缎带.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .badge-ribbon {
+      position: relative;
+      background: red;
+      height: 100px;
+      width: 100px;
+      border-radius: 50%;
+      margin-left: 10px;
+    }
+    /* 绘制两角三角形 */
+    .badge-ribbon::before,
+    .badge-ribbon::after {
+      content: "";
+      position: absolute;
+      border-left: 40px solid transparent;
+      border-right: 40px solid transparent;
+      border-bottom: 70px solid red;
+      top: 70px;
+    }
+    /* 控制三角形位置和旋角度 */
+    .badge-ribbon::before {
+      left: -10px;
+      transform: rotate(-140deg);
+    }
+    .badge-ribbon::after {
+      right: -10px;
+      transform: rotate(140deg);
+    }
+  </style>
+</head>
+<body>
+  <div class="badge-ribbon"></div>
+</body>
+</html>
