CSS SNIPPET

  返回

有三角形的对话文本容器  视觉效果beginner

创建一个顶部有三角形的文本容器。

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;
}
效果演示
Border with top triangle
代码说明
  • 使用:before:after 伪元素创建两个三角形。
  • :before 三角形的颜色应当与容器边框颜色一致。
  • :after 三角形的颜色应当与容器背景色一致。
  • :before 三角形的边框宽度应当比:after1px,以便呈现边框效果。
  • :after三角形应当比:before 三角形偏右1px,以便显示出 :before 三角形的左边。
浏览器支持

100.0%