CSS Battle #128 – Letter N

[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 – 607.88 {412}

<div b></div>
<div y></div>
<div></div>
<style>
  body {
    background: #998235;
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0;
  }
  div {
    width: 40;
    height: 230;
    background: #0B2429;
  }
  [b] {
    align-self: end;
    z-index: 1;
  }
   [y] {
    align-self: center;
    height: 160;
    width: 42;
    transform: skew(20deg);
    background: #FCBE5C;
  }
</style>

[meg-gutshall]

First attempt with LOTS of help from @Arvind644 – 610.2 {385}

<div s></div>
<div m></div>
<div></div>
<style>
  body {
    background: #998235;
    margin: 0 135;
    display: flex;
    gap: 4px;
  }
  div {
    width: 40;
    height: 230;
    background: #0B2429;
  }
  [s] {
    align-self: end;
    z-index: 1;
  }
  [m] {
    align-self: center;
    background: #FCBE5C;
    width: 42;
    height: 160;
    transform: skew(20deg);
  }
</style>

Refactored – 611.22 {375}

<p s>
<p m>
<p>
<style>
  body {
    background: #998235;
    margin: 0 135;
    display: flex;
    gap: 4px;
  }
  p {
    width: 40;
    height: 230;
    background: #0B2429;
    margin: 0;
  }
  [s] {
    align-self: end;
    z-index: 1;
  }
  [m] {
    align-self: center;
    background: #FCBE5C;
    width: 42;
    height: 160;
    transform: skew(20deg);
  }
</style>

Minified – 640.61 {240}

<p s><p m><p><style>body{background:#998235;margin:0 135;display:flex;gap:4px}p{width:40;height:230;background:#0b2429;margin:0}[s]{align-self:end;z-index:1}[m]{align-self:center;background:#fcbe5c;width:42;height:160;transform:skew(20deg)}

[meg-gutshall]

Using positioning – 610.9 {378}

<p e>
<p m>
<p s>
<style>
  * {
    margin: 0;
    background: #998235;
    position: absolute;
  }
  body {
    padding: 0 135;
  }
  p {
    width: 40;
    height: 230;
    background: #0B2429;
  }
  [s], [m] {
    top: 70;
  }
  [m] {
    left: 179;
    background: #FCBE5C;
    width: 42;
    height: 160;
    transform: skew(20deg);
  }
  [e] {
    left: 225;
  }
</style>

Minified – 643.83 {232}

<p e><p m><p s><style>*{margin:0;background:#998235;position:absolute}body{padding:0 135}p{width:40;height:230;background:#0b2429}[m],[s]{top:70}[m]{left:179;background:#fcbe5c;width:42;height:160;transform:skew(20deg)}[e]{left:225}

[Narigo]

Code Source – 625.95 {287}

<style>
body {
  background:
    linear-gradient(70deg,#3210 31px, #FCBE5C 0 71px, #3210 0) 175px 70px / 90px 160px no-repeat,
    conic-gradient(#0B2429, #0B2429) 225px 0px / 40px 230px no-repeat,
    conic-gradient(#0B2429, #0B2429) 135px 70px / 40px 230px no-repeat,
    #998235
  ;
}

[shaishav007]

Code Source – 601.26 {604 characters}

<div class="parent">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

<style>
  body{
    margin:0;
    background:#998235;
  }
  .parent{
    position:relative;
  }
  .a{
    position:absolute;
    width:40px;
    height:230px;
    background:#0B2429;
    transform:translate(225px);
  }
  .b{
    position:absolute;
    width:42px;
    height:160px;
    background:#FCBE5C;
    transform:translate(179px,70px)skewX(20deg) ;
    
  }
  .c{
    position:absolute;
    width:40px;
    height:230px;
    background:#0B2429;
    transform:translate(135px,70px);
  }
</style>

[meg-gutshall]

Woohoo!!!