【问题标题】:CSS Rectangle with one corner not connected [duplicate]一个角未连接的CSS矩形[重复]
【发布时间】:2022-01-14 19:33:54
【问题描述】:

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

【问题讨论】:

标签: css user-interface sass user-experience


【解决方案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;
  }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-07-20
    • 2016-04-14
    • 1970-01-01
    • 1970-01-01
    • 2020-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-23
    相关资源
    最近更新 更多