顶部三角形边框

创建一个带有顶部三角形的内容容器。

  • 使用 ::before::after 伪元素创建两个三角形。
  • 两个三角形的颜色应分别与容器的 border-color 和容器的 background-color 相同。
  • 一个三角形(::before)的 border-width 应比另一个三角形(::after)宽 1px,以充当边框。
  • 较小的三角形(::after)应在较大的三角形(::before)的右侧 1px,以显示其左边框。
<div class="container">带有顶部三角形的边框</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;
}