顶部带三角形的边框
创建一个在顶部带有三角形的内容容器。
- 使用
::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