Update border-with-top-triangle.md

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 -->