找到你要的答案

Q:HTML - inner rounded 2 elements

Q:HTML元素内圆2

I've been looking around but could not find a way t do "inner" rounded corners in a "L" like element

Currently I have something like the following:

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

Problem comes that the "inner corner" is 90º and I want a rounded corner, is there any way to accomplish that 90º angle to be rounded like the rest?

Have to keep in mind that all background colours/image can change (#a and #b will always share the same colour) and all text lengths are variable so #a can have less or equal lines than #b.

Is there any way to accomplish this?

And is there any way to remove the <div style="clear:both"></div> and have the container to keep all elements inside or is something absolutely necessary?

我一直在四处寻找,但找不到一个“内部”圆角在“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 #总是会分享相同的颜色)和所有文本的长度是可变的,#一可以小于或等于线比# B.

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

有什么办法消除<;DIV style=“明确:“>;<;/ DIV >;有容器保持所有元素或是绝对必要的吗?

answer1: 回答1:

Little hacky method using of box-shadow for #c and pseudo element for #b for adding right side curved

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

小容易的方法为# B # C和伪元素框阴影添加右侧弯

#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  css  html5  css3  css-shapes