experiments

pad.html

@@ -0,0 +1,31 @@
+<style>
+    .pad
+    {
+        position:relative;
+        margin:50px;
+        border-top:5px solid blue;
+    }
+    .pad::before, .pad::after
+    {
+        content: " ";
+        display: block;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: -12px;
+        border: 5px solid #000;
+        box-sizing: border-box;
+        transform: rotate(45deg);
+    }
+    .pad::before
+    {
+        left: -18px;
+    }
+    .pad::after
+    {
+        right:-18px;
+    }
+    </style>
+    <div>
+        <div class="pad"></div>
+    </div>

svg.html

@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100" style="width:100px; height:100%; background:yellow;">
+    <defs>
+        <symbol id="diamond">
+            <g transform="rotate(45 10 10)">
+                <rect width="20" height="20"></rect>
+            </g>
+        </symbol>
+    </defs>
+    <use href="#diamond" x="0" y="0"    />
+    <use href="#diamond" x="0" y="100%" />
+</svg>
+