CODEWITHSUNDEEP
htmlcsscss-shapes
user1090694
user1090694

Reputation: 629

HTML - inner rounded 2 elements

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?

Upvotes: 2

Views: 180

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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>

Upvotes: 1

Related Questions