From 2e2208acaf2fe923757528f411abf321094837be Mon Sep 17 00:00:00 2001
From: 30secondsofcode <30secondsofcode@gmail.com>
Date: Sat, 28 Sep 2019 10:57:29 +0000
Subject: [PATCH] Travis build: 491

---
 README.md                     | 55 +++++++++++++++++++++++++++++++++++
 snippet_data/snippetList.json | 15 ++++++++++
 snippet_data/snippets.json    | 27 +++++++++++++++++
 3 files changed, 97 insertions(+)

diff --git a/README.md b/README.md
index eb2d519e9..1bfa71761 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,7 @@ See CONTRIBUTING.md for the snippet template.
 <details>
 <summary>View contents</summary>
 
+* [`Border with top triangle`](#border-with-top-triangle)
 * [`Circle`](#circle)
 * [`Counter`](#counter)
 * [`Custom scrollbar`](#custom-scrollbar)
@@ -1346,6 +1347,60 @@ CSS variables that contain specific values to be reused throughout a document.
 ##  Visual
 
 
+### Border with top triangle
+
+Creates a text container with a triangle at the top.
+
+#### HTML
+
+```html
+<div class="container">
+  Border with top triangle
+</div>
+```
+
+```css
+.container {
+  position: relative;
+  background: #ffffff;
+  padding: 15px;
+  border: 1px solid #dddddd;
+  margin-top: 20px;
+}
+
+.container:before, .container:after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 19px;
+  border: 11px solid transparent;
+  border-bottom-color: #dddddd;
+}
+
+.container:after {
+  left: 20px;
+  border: 10px solid transparent;
+  border-bottom-color: #ffffff;
+}
+```
+
+
+#### Explanation
+
+
+- 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
+
+100.0%
+
+<br>[⬆ Back to top](#contents)
+
 ### Circle
 
 Creates a circle shape with pure CSS.
diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index 6b1a763f4..78e4c946d 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -1,5 +1,20 @@
 {
   "data": [
+    {
+      "id": "border-with-top-triangle",
+      "type": "snippetListing",
+      "title": "Border with top triangle",
+      "attributes": {
+        "text": "Creates a text container with a triangle at the top.\n\n#### HTML\n\n",
+        "tags": [
+          "visual",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "4fed80c83d37457d5ce111ee5c3272945c203319ccc4f5fe4355c359840f8628"
+      }
+    },
     {
       "id": "bouncing-loader",
       "type": "snippetListing",
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index b9db910db..beb2c8f74 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -1,5 +1,32 @@
 {
   "data": [
+    {
+      "id": "border-with-top-triangle",
+      "title": "Border with top triangle",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "border-with-top-triangle.md",
+        "text": "Creates a text container with a triangle at the top.\n\n#### HTML\n\n",
+        "explanation": "\n\n- Use the `:before` and `:after` pseudo-elements to create two triangles. \n- The color of the `:before` triangle should be the same as the container's border color. \n- The color of the `:after` triangle should be the same as the container background color.\n- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.\n- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.\n\n",
+        "browserSupport": {
+          "text": "\n",
+          "supportPercentage": 100
+        },
+        "codeBlocks": {
+          "html": "<div class=\"container\">\n  Border with top triangle\n</div>",
+          "css": ".container {\n  position: relative;\n  background: #ffffff;\n  padding: 15px;\n  border: 1px solid #dddddd;\n  margin-top: 20px;\n}\n\n.container:before, .container:after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 19px;\n  border: 11px solid transparent;\n  border-bottom-color: #dddddd;\n}\n\n.container:after {\n  left: 20px;\n  border: 10px solid transparent;\n  border-bottom-color: #ffffff;\n}",
+          "js": "",
+          "scopedCss": "[data-scope=\"border-with-top-triangle\"] .container {\n  position: relative;\n  background: #ffffff;\n  padding: 15px;\n  border: 1px solid #dddddd;\n  margin-top: 20px; }\n\n[data-scope=\"border-with-top-triangle\"] .container:before, [data-scope=\"border-with-top-triangle\"] .container:after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 19px;\n  border: 11px solid transparent;\n  border-bottom-color: #dddddd; }\n\n[data-scope=\"border-with-top-triangle\"] .container:after {\n  left: 20px;\n  border: 10px solid transparent;\n  border-bottom-color: #ffffff; }\n"
+        },
+        "tags": [
+          "visual",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "4fed80c83d37457d5ce111ee5c3272945c203319ccc4f5fe4355c359840f8628"
+      }
+    },
     {
       "id": "bouncing-loader",
       "title": "Bouncing loader",