CSS Battle #88 – Tight Corner

[Narigo]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source – <strong>score {characters}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {characters}

your cssbattles code here!

[Narigo]

Code Source – 603.01 {513}

<div></div>
<div b></div>
<style>
  &{background:#D25B70}
  div {
    position:fixed;
    inset: 0 0 calc(50% + 20px);
    background:#F7F3DA;
  }
  div:before,div:after {
    content:'';
    position:absolute;
    width:50%;
    height:40px;
  }
  div:before{
    bottom:-20;
    border-radius:0 10px;
    background:#D25B70;
  }
  div:after{
    bottom:-20;
    right:0;
    border-radius:0 0 0 20px;
    background:#F7F3DA;
  }
  [b]{
    transform-origin:50% calc(100% + 20px);
    rotate:180deg;
  }
</style>

[Narigo]

Based on @surajb0710's idea:

Code Source – 611.65 {371}

<div></div>
<div b></div>
<style>
  &{background:#F7F3DA}
  div {
    position:fixed;
    inset: 110px 50% 0 0;
    border-radius: 0 10px;
    background:#D25B70;
  }
  div:before {
    content:'';
    position:absolute;
    inset:40px 0 -20px 0;
    border-radius:0 20px;
    background:#F7F3DA;
  }
  [b]{
    transform-origin:100% 40px;
    rotate:180deg;
  }
</style>

[meg-gutshall]

First attempt based on @surajb0710's idea – 605.76 {445}

<div u>
  <div o></div>
</div>
<div u r>
  <div o></div>
</div>
<style>
  * {
    background: #F7F3DA;
    margin: 0;
  }
  div {
    position: fixed;
    bottom: 0;
  }
  [o] {
    width: 200;
    height: 150;
    background: #F7F3DA;
    border-radius: 0 20px 0 0;
  }
  [u] {
    width: 200;
    height: 190;
    background: #D25B70;
    border-radius: 0 10px 0 0;
  }
  [r] {
    transform-origin: 100% 21%;
    rotate: 180deg;
  }
</style>

[surajb0710]

Code Source – 601.07{622}

`

<style>

body{
margin:0
}

.clsE{
background: #F7F3DA;
width:100%;
height:100%;
}

.clsA, .clsC{
width: 50%;
height: 50%;
background: #F7F3DA;
position:absolute;
z-index:1;
}

.clsB, .clsD{
width: 50%;
height: 190px;
background: #D25B70;
position:absolute;
}

.clsA, .clsB{
bottom:0;
}

.clsC, .clsD{
margin-left:200px;
}

.clsA{
border-top-right-radius:20px;
}

.clsC{
border-bottom-left-radius:20px;
}

.clsB{
border-top-right-radius:10px;
}

.clsD{
border-bottom-left-radius:10px;
}
</style>`