使用CSS实现为边框添加四个角

 效果展示：

代码实现：

 <div class="tri">

            <div class="tri_box"></div>

</div>

.tri{

          position: relative;

          border: 1px solid rgba(68, 170, 255, 0.17);

          .panel-footer {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

          }

          .tri_box::after {

            position: absolute;

            bottom: 0;

            right: 0;

            width: 20px;

            height: 20px;

            border-right: 2px solid #44aaff;

            border-bottom: 2px solid #44aaff;

            content: "";

          }

          .tri_box::before {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 20px;

            height: 20px;

            border-left: 2px solid #44aaff;

            border-bottom: 2px solid #44aaff;

            content: "";

          }

        }

        .tri::before {

          position: absolute;

          top: 0;

          left: 0;

          width: 20px;

          height: 20px;

          border-left: 2px solid #44aaff;

          border-top: 2px solid #44aaff;

          content: "";

        }

        .tri::after {

          position: absolute;

          content: "";

          top: 0;

          right: 0;

          width: 20px;

          height: 20px;

          border-right: 2px solid #44aaff;

          border-top: 2px solid #44aaff;

         

        }

 父组件： 必须设置 position:relative/absolute，因为4个角 position 是 absolute；

• :before 伪元素用于在目标元素的内容前插入额外的内容。
• :after 伪元素用于在目标元素的内容后插入额外的内容。
• 在 CSS 中，:before 和 ::before 是两种写法，用于表示伪元素。实际上，它们是等效的，可以互相替代。W3C 规范中建议使用 ::before 表示伪元素，以便与伪类（如 :hover）区分开来。这是因为伪元素和伪类在语法上是不同的，而使用双冒号 :: 有助于清晰地区分它们。