border-with-top-triangle.md

title	type	tags	cover	dateModified
Border with top triangle	snippet	visual	greek-coffee	2021-01-07 23:52:15 +0200

Creates a content container with a triangle at the top.

• Use the ::before and ::after pseudo-elements to create two triangles.
• The colors of the two triangles should be the same as the container's border-color and the container's background-color respectively.
• The border-width of the one triangle (::before) should be 1px wider than the other one (::after), in order to act as the border.
• The smaller triangle (::after) should be 1px to the right of the larger triangle (::before) to allow for its left border to be shown.

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

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