12.顶部带三角形的边框 CSS 关键字 currentColor
顶部带三角形的边框
创建一个在顶部带有三角形的内容容器。
- 使用
::before和::after伪元素创建两个三角形。 - 两个三角形的颜色应分别与容器的
border-color和容器的background-color相同。 - 一个三角形(
::before)的border-width应比另一个(::after)宽1px,以起到边框的作用。 - 较小的三角形(
::after)应位于较大三角形(::before)右侧1px处,以显示其左边框。
<body><div class="container">顶部带三角形的边框</div><style>.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 tran