CSS Battle #15 – Overlap

[aishwarya-mali]

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 {character count}</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 {character count}

your cssbattles code here!

[aishwarya-mali]

using after, overflow & transform – 602.82 {520}

<p class="c n2">
<p class="c n">
<style>
  body{
    background: #09042A;
    display: grid;
    place-items: center;
  }
  .c {
  background: #E78481;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  height: 150;
  width: 150;
  left: 75;
  transform: scale(-1, 1);
}
.c:after {
  background: #09042A;
  position: absolute;
  border-radius: 50%;
  content: '';
  height: 150;
  width: 150;
  left: 100
}
.n{
  transform: none;
  background:#7B3F61;
  position: absolute;
  right: 20
}
.n2{
  left: 50
}