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原文地址：https://blog.csdn.net/qq449245884/article/details/140579160
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！