Question

我一直在环顾四周，却找不到像“L”这样的元素中“内”圆角的方法

目前我有以下内容：

#container {
  width: 800px;
  display: block;
  background: white;
}
#a {
  background: black;
  color: white;
  float: left;
  word-wrap: break-word;
  width: 150px;
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}
#b {
  background: black;
  color: white;
  float: left;
  border-radius: 5px;
  padding: 2px 2px 2px 14px;
  margin: 2px 2px 2px -8px;
}
#c {
  background: black;
  color: white;
  float: right;
  width: calc(100% - 166px);
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}

<div id="container">
  <div id="a">
    WWWWWWWWWWWW
    <br/>WWWWWWWWWWWW
    <br/>WWWWWWWWWWWW
    <br/>
  </div>
  <div id="b">
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    <br/>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
  </div>
  <div id="c">
    OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>
  </div>
  <div style="clear:both"></div>
</div>

问题是“内角”是90º而我想要一个圆角，有没有办法让90º角度像其他角一样圆？

必须记住，所有背景颜色/图像都可以更改（#a和#b将始终共享相同的颜色）并且所有文本长度都是可变的，因此#a可以减少或等于#b的行。

有没有办法实现这个目标？

有没有办法删除<div style="clear:both"></div>并让容器保留所有元素或者是绝对必要的东西？

Answer 1

使用box-shadow #c和#b的伪元素添加right边弯曲

的小hacky方法

#container {
  width: 800px;
  display: block;
  background: white;
}
#a {
  background: black;
  color: white;
  float: left;
  word-wrap: break-word;
  width: 150px;
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}
#b {
  background: black;
  color: white;
  float: left;
  border-radius: 5px;
  padding: 2px 2px 8px 14px;
  margin: 2px 2px 2px -8px;
  position: relative;
}
#b:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 7px;
  right: -6px;
  width: 10px;
  background: red;
  border-radius: 0 5px 5px 0;
}
#c {
  background: black;
  color: white;
  float: right;
  width: calc(100% - 166px);
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
  box-shadow: 0px 0px 0px 4px green;
  position: relative;
  top: -7px;
}

<div id="container">
  <div id="a">
    WWWWWWWWWWWW
    <br/>WWWWWWWWWWWW
    <br/>WWWWWWWWWWWW
    <br/>
  </div>
  <div id="b">
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    <br/>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
  </div>
  <div id="c">
    OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>OOOOOOOOOOOO
    <br/>
  </div>
  <div style="clear:both"></div>
</div>

HTML - 内部圆形2个元素

1 个答案: