CSS Battle #84 – Junction

[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.61 {494}

<style>
  & {
    background: 
      radial-gradient(circle at 200px 110px, #FE5F55 20px, #0000 0),
      radial-gradient(circle at 200px 190px, #FE5F55 20px, #0000 0),
      radial-gradient(circle at 240px 150px, #A64942 20px, #0000 0),
      radial-gradient(circle at 160px 150px, #A64942 20px, #0000 0),
      linear-gradient(#FE5F55 230px, #0000 0) 50% -115px / 40px repeat-y,
      linear-gradient(90deg,#A64942 330px, #0000 0) -165px 50% / 100% 40px repeat-x,
      #191919;
  }
</style>

[Leoactionz]

Code Source – 600.83 {648}

  <div class="dark left"></div>
  <div class="dark right"></div>
  <div class="light top"></div>
  <div class="light bottom"></div>

<style>
  body{
    background-color: #191919;
  }
  
  .dark {
    width: 100%;
    height: 40px;
    background-color: #A64942;
    border-radius: 50px;
    position: absolute;
    top: 130px;
  }

  .left{
    left: -220px;
  }

  .right{
    
    right: -220px;
  }

  .light {
    width: 40px;
    height: 100%;
    background-color: #FE5F55;
    border-radius: 50px;
    position: absolute;
    left: calc(50% - 20px);
  }
  
  .top {
    top: -170px;
  }
  .bottom {
    bottom: -170px;
  }
</style>