CSS Battle #32 – Band-aid

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

[meg-gutshall]

First try – 622.07 {304}

<div class=y>
  <div class=g></div>
</div>
<style>
  body {
    display: grid;
    place-items: center;
  }
  .y {
    rotate: -45deg;
    background: #F3AC3C;
  }
  .g {
    rotate: 90deg;
    background: #A3A368;
  }
  div {
    width: 50px;
    height: 200px;
    mix-blend-mode: screen;
  }
</style>

Refactored & minified – 674.03 {177}

<div y><div g><style>body{display:grid;place-items:center;}[y]{rotate:-45deg;background:#F3AC3C}[g]{rotate:90deg;background:#A3A368}div{width:50;height:200;mix-blend-mode:screen

Refactored some more after @Narigo goaded me – 679.14 {170}

<div><div g><style>body{display:grid;place-items:center}[g]{rotate:90deg;background:#A3A368}div{rotate:-45deg;background:#F3AC3C;width:50;height:200;mix-blend-mode:screen

[Narigo]

Smaller than @meg-gutshall again 😅 – 685.41 {162}

<r><r><style>*+*,r{display:grid;place-items:center}r{rotate:45deg;width:50;height:200;background:#A3A368;mix-blend-mode:screen}r>r{rotate:90deg;background:#F3AC3C

[aishwarya-mali]

Are tags of any character allowed? I saw you use a, b, c in other challenge?

[aishwarya-mali]

Mix blend mode – 655.62{207}

<p><style>*{margin:0}p{margin:50 175}p:after,p:before{content:'';height:200;width:50;position:absolute}p:before{background:#a3a368;rotate:45deg}p:after{background:#f3ac3c;rotate:-45deg;mix-blend-mode:screen}