CSS Battle #46 – Mountains

[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 {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!

[Narigo]

overflow: hidden

<div class="root">
<div class="a"></div>  
<div class="b"></div>  
</div>
<style>
  body {
    display: grid;
    place-items: center;
    background: #293462;
  }
  .root {
    background: #FFF1C1;
    display: grid;
    border-radius: 50%;
    overflow: hidden;
    height: 200px;
    width: 200px;
    rotate: 225deg;
  }
  .a,.b {
    background: #FE5F55;
    height: 30px;
    width: 130px;
  }
  .b {
    height: 140px;
    margin-left: -30px;
    margin-top: -55px;
  }
</style>

[danieltott]

First pass!

`rotate` and `box-shadow`

<dt>
<style>
  *{
    background:#293462;
  }
  body{
    background:#FFF1C1;
    clip-path:circle(100px)
  }
  dt {
    background:#FE5F55;
    height:2in;
    width:2in;
    rotate:45deg;
    position:fixed;
    top:149;
    left:146;
    box-shadow:-30px 129px #FE5F55
  }
</style>