一个角未连接的CSS矩形[重复]

Question

尝试使用 css 复制此设计。引号是png。但只能找到实心矩形和更多页角折叠以节省位置的帮助。Design I'm trying to replicate with Css

Answer 1

我给了它们不同的颜色，这样你就可以很容易地看到正在发生的事情。

.myDiv {
  margin-top: 30px;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 10px solid red;
  border-radius: 0 0 15px 15px;
  border-top: none;
  }
.myDiv::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 40px; 
  background-color: orange;
  top:-10px;
  left:20px;
  border-radius: 0 10px 0 0;
  }