add triangle svg path

views/cards.html

@@ -27,6 +27,10 @@
         id="star" 
         d="m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z"
       />
+      <path
+        id="triangle"
+        d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z"
+      />
       <pattern
         id="pattern-stripe"
         width="2"
@@ -64,6 +68,23 @@
     </svg>
   </div>
 
+  <div class="card">
+    <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+      <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
+      <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
+    </svg>
+
+    <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+      <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
+      <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
+    </svg>
+
+    <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+      <use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
+      <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
+    </svg>
+  </div>
+
   <div class="card">
     <svg class="item" height="160" width="80" viewBox="0 0 200 400">
       <use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>