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

Question

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

我想要达到的结果

Answer 1

.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;
}