30-seconds-of-code/snippets/border-with-top-triangle.md

Border with top triangle

Use pure CSS to create div with top triangle.

HTML

<div class="container">
  Border with top triangle
</div>

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

✅ No caveats.