想要那种用css来写直角边框，有什么好的办法来写吗？

想要那种用css来写直角边框，有什么好的办法来写吗？

我想要达到的结果

.div {
  position: relative;
}

.div:before{
    content: "";
    position: absolute;
    left: 0;
    width: 30px;
    height: 10px;
    border: 1px solid red;
    border-radius: 4px;
    border-bottom: 0;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}

最简单的办法，把外层弄个图片，里面这层用定位贴着图片就行了

写一个盒子，给出宽高和边框，然后定位，上面用另一个盒子盖住它，只漏出需要的部分

https://juejin.cn/post/7076371912711995423

使用伪元素, 添加宽高 颜色实现