HTML - 内圆 Angular 2 元素

Question

我一直在环顾四周，但找不到在类似“L”的元素中做“内部”圆 Angular 的方法

目前我有如下内容:

#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>

问题是“内 Angular ”是 90º，我想要一个圆 Angular ，有什么办法可以像其他 Angular 一样将 90º Angular 变成圆 Angular 吗？

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

有什么办法可以做到这一点吗？

有什么方法可以删除 <div style="clear:both"></div>并让容器将所有元素保存在里面，或者是绝对必要的东西？

Answer 1

使用 box-shadow 为 #c 和伪元素为 #b 添加 right 侧面 flex

#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>