CSS Battle #132 – Letter S

[meg-gutshall]

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!

[Arvind644]

Code Source – 603.89 {485}

<div t></div>
<div m></div>
<div b></div>
<p></p>
<p r></p>
<style>
body {
  background: #4F77FF;
  display: grid;
  place-content: center;
  gap: 20px;
}
p {
  position: absolute;
  height: 40;
  width: 20;
  background: #FFF;
  translate: 72px 87px;
}
[r] {
  translate: 292px 127px;
}
div {
  width: 240;
  height: 50;
  background: #FFF;
  border-radius: 10px;
  color: #1038BF;
}
[m] {
  height: 20;
}
[t] {
  box-shadow: 20px -20px; 
}
[b] {
  box-shadow: -20px 20px; 
}
</style>

[Narigo]

Timed it and got 100% in 10:01.59 @meg-gutshall 😅

Code Source – 604.94 {461}

<article>
  <div></div>
</article>
<article r>
  <div></div>
</article>
<style>
body{
  background: #4F77FF;
  margin: 70+80
}
  article {
    border: 20px solid #fff;
    border-radius: 10px;
    border-right-color: #3210;
    width:200;
    height:50
  }
  div {
    margin:-20px;
    width: 190;
    border-radius: 10px;
    border: 25px solid #fff;
    box-shadow: 20px -20px #1038BF
  }
  [r] {
    transform: translateY(-20px) rotate(180deg);
  }
</style>```

</details>