CSS实现顶部三角形矩形

最新推荐文章于 2023-03-21 13:56:02 发布

原创最新推荐文章于 2023-03-21 13:56:02 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

HTML+CSS 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用CSS创建带有顶部三角形的矩形的方法。通过调整边界颜色和宽度，可以轻松地创建出不同大小和颜色的三角形。该技巧利用了伪元素:before和:after来实现，:before用于创建黑色的三角形，而:after则创建了一个稍小的白色三角形以形成空隙效果。

效果如图：

思路：首先知道如何创建一个三角形，然后利用伪元素让大三角形覆盖小三角形即可

<html>
  <head>
    <style>
      /* 三角形的实现：
        div {
            width: 0;
            height: 0;
            border: 20px solid;
            这个是显示下面的三角形
            border-color: transparent transparent red;
        } */
      #content {
        width: 200px;
        height: 200px;
        border: solid 1px #000;
        margin: 200px auto;
        position: relative;
      }
      #content:before,
      #content:after {
        width: 0px;
        height: 0px;
        border: transparent solid;
        position: absolute;
        bottom: 100%;
        content: "";
      }
      #content:before {
        border-width: 10px;
        border-bottom-color: #000;
        right: 15px;
      }
      #content:after {
        /* after会覆盖掉before的内容，所以border-width要相对before里的小，以便把中间部分留空，让before只显示最外边那一点*/
        border-width: 8px;
        border-bottom-color: #fff;
        /* 因为border-width相对较小，为了让它在before三角形的内部，所以需要距离右边距相对before要大一点 */
        right: 17px;
      }
    </style>
  </head>
  <body>
    <!-- CSS 顶部三角形矩形 -->
    <div id="content"></div>
  </body>
</html>