diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md
new file mode 100644
index 000000000..19006b467
--- /dev/null
+++ b/snippets/border-with-top-triangle.md
@@ -0,0 +1,49 @@
+---
+title: Border with top triangle
+tags: visual,beginner
+---
+
+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