12.顶部带三角形的边框 & CSS 关键字 currentColor

@大迁世界

已于 2024-07-20 22:55:05 修改

阅读量14

点赞数

分类专栏： CSS 技巧与案例详解文章标签： css 前端

于 2024-07-20 22:54:58 首次发布

本文链接：https://blog.csdn.net/qq449245884/article/details/140579160

版权

CSS 技巧与案例详解专栏收录该内容

13 篇文章 0 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

顶部带三角形的边框

创建一个在顶部带有三角形的内容容器。

使用 ::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

了解本专栏

超级会员免费看

@大迁世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
12.顶部带三角形的边框 & CSS 关键字 currentColor

这个技巧创建了一个看起来像是从顶部边框延伸出来的三角形的效果。它常用于工具提示、弹出窗口或任何需要指向特定元素的设计。也可能导致意想不到的结果,特别是当你处理复杂的嵌套元素和级联规则时。在决定是否使用它时,一定要仔细考虑你的特定用例。时,你不需要同时改变其他属性。这可以使你的 CSS 更加简洁,更易于维护。因此,你可能仍然会在实际项目中找到它,值得了解它的作用和工作原理。)使用相同的颜色时,它非常有用。的主要优点是,当你决定改变一个元素的。创建一个在顶部带有三角形的内容容器。提供值,它将使用父元素的。
复制链接

扫一扫