From ba58815a4cfda49695076a2fdfdfe974726aa9e6 Mon Sep 17 00:00:00 2001
From: zhaozhiming <zhaozhiming@tik.com>
Date: Fri, 18 Jan 2019 18:18:43 +0800
Subject: [PATCH 1/2] feat: add border with top triangle snippet

---
 snippets/border-with-top-triangle.md | 60 ++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 snippets/border-with-top-triangle.md

diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md
new file mode 100644
index 000000000..b83195f3c
--- /dev/null
+++ b/snippets/border-with-top-triangle.md
@@ -0,0 +1,60 @@
+### Border with top triangle
+
+Use pure CSS to create div with top triangle.
+
+#### HTML
+
+```html
+<div class="container">
+  Border with top triangle
+</div>
+```
+
+#### CSS
+
+```css
+.container {
+  display: block;
+  position: relative;
+  background: #ffffff;
+  padding: 15px;
+  border: 1px solid #dddddd;
+  margin-top: 20px;
+}
+
+.container:before, .container:after {
+  content: '';
+  display: block;
+  position: absolute;
+  bottom: 100%;
+  width: 0;
+  height: 0;
+}
+
+.container:before {
+  left: 19px;
+  border: 11px solid transparent;
+  border-bottom-color: #dddddd;
+}
+
+.container:after {
+  left: 20px;
+  border: 10px solid transparent;
+  border-bottom-color: #ffffff;
+}
+```
+
+#### Demo
+
+#### Explanation
+
+1. Use pseudo-element `before` and `after` to create two triangles. How to create triangle can see the [Triangle](https://30-seconds.github.io/30-seconds-of-css/#triangle). 
+2. The color of the `before` triangle as same as the container border color. The color of the `after` triangle as same as the container background color.
+3. The border width of the `before` triangle is wider 1px(depend on the border width of container) than the `after` triangle, then we can see the top triangle border on the container.
+4. The `after` triangle is on the right of the `before` triangle(1px) so that can make the left part border of the `before` triangle to visible.
+
+#### Browser support
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: visual -->

From 96fa1e9f373fa1b879e1ff1bbd9a6821aa5a718a Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 28 Sep 2019 13:54:46 +0300
Subject: [PATCH 2/2] Update border-with-top-triangle.md

---
 snippets/border-with-top-triangle.md | 31 +++++++++-------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md
index b83195f3c..19006b467 100644
--- a/snippets/border-with-top-triangle.md
+++ b/snippets/border-with-top-triangle.md
@@ -1,6 +1,9 @@
-### Border with top triangle
+---
+title: Border with top triangle
+tags: visual,beginner
+---
 
-Use pure CSS to create div with top triangle.
+Creates a text container with a triangle at the top.
 
 #### HTML
 
@@ -10,11 +13,8 @@ Use pure CSS to create div with top triangle.
 </div>
 ```
 
-#### CSS
-
 ```css
 .container {
-  display: block;
   position: relative;
   background: #ffffff;
   padding: 15px;
@@ -24,14 +24,8 @@ Use pure CSS to create div with top triangle.
 
 .container:before, .container:after {
   content: '';
-  display: block;
   position: absolute;
   bottom: 100%;
-  width: 0;
-  height: 0;
-}
-
-.container:before {
   left: 19px;
   border: 11px solid transparent;
   border-bottom-color: #dddddd;
@@ -44,17 +38,12 @@ Use pure CSS to create div with top triangle.
 }
 ```
 
-#### Demo
-
 #### Explanation
 
-1. Use pseudo-element `before` and `after` to create two triangles. How to create triangle can see the [Triangle](https://30-seconds.github.io/30-seconds-of-css/#triangle). 
-2. The color of the `before` triangle as same as the container border color. The color of the `after` triangle as same as the container background color.
-3. The border width of the `before` triangle is wider 1px(depend on the border width of container) than the `after` triangle, then we can see the top triangle border on the container.
-4. The `after` triangle is on the right of the `before` triangle(1px) so that can make the left part border of the `before` triangle to visible.
+- Use the `:before` and `:after` pseudo-elements to create two triangles. 
+- The color of the `:before` triangle should be the same as the container's border color. 
+- The color of the `:after` triangle should be the same as the container background color.
+- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.
+- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.
 
 #### Browser support
-
-<span class="snippet__support-note">✅ No caveats.</span>
-
-<!-- tags: visual -->