CSS实现顶部三角形矩形

效果如图：

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

<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>

 

posted @ 2020-11-27 11:14  neverthelessing  阅读(247)  评论(0)    收藏  举报