css实现价格标签

maliangcoder · maliangcoder · commit f7c4f3cc5050 · 2023-01-10T23:01:14.000+08:00
diff --git a/常用的CSS主流布局案例(1~8)/33_价格标签.html b/常用的CSS主流布局案例(1~8)/33_价格标签.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>价格标签</title>
+    <style>
+        :root {
+            --price-tag-background: red;
+            --price-tag-height: 32px;
+        }
+
+        .price-tag {
+            margin-left: 30px;
+            position: relative;
+            max-width: 80px;
+            padding: 0 5px;
+            height: var(--price-tag-height);
+            background: var(--price-tag-background);
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .price-tag::before {
+            content: "";
+            border: calc(var(--price-tag-height) / 2) solid transparent;
+            border-right-color: red;
+            position: absolute;
+            left: 0;
+            top: 0;
+            transform: translate(-100%, 0);
+        }
+
+        .price-tag::after {
+            content: "";
+            width: 10px;
+            height: 10px;
+            background: #fff;
+            border-radius: 9999rem;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+    </style>
+</head>
+<body>
+<div class="price-tag">¥99.09</div>
+</body>
+</html>
