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