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

Posted 2023-03-25

【中文标题】一个角未连接的CSS矩形[重复]

【英文标题】：CSS Rectangle with one corner not connected [duplicate]

【发布时间】：2022-01-14 19:33:54

【问题描述】：

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

【问题讨论】：

来自副本：***.com/a/48103289/8620333

【参考方案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;