CSS Battle #113 – Black Light

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

[JoeKarow]

Code Source – 768.03 {91}

<style>&{background:conic-gradient(at-95% 50%,#5776F6 86.3deg,#191919 0 93.7deg,#5776F6 0)

I have zero shame and have stolen this code from Jörn.

[meg-gutshall]

First attempt – 651.54 {215}

<div></div>
<style>
  * {
    background: #5776F6;
    margin: 0;
  }
  div {
    width: 100%;
    height: 100%;
    background: #191919;
    clip-path: polygon(0 125px, 25pc 25vw, 25pc 50vw, 0 175px);
  }
</style>

Minified – 708.39 {137}

<p><style>*{background:#5776F6;margin:0}p{width:100%;height:100%;background:#191919;clip-path:polygon(0 125px,25pc 25vw,25pc 50vw,0 175px

[davidalpert]

Code Source – 614.93 {345}

<div id="a"></div>
<div id="b"></div>
<style>
  body {
    background: #191919;
  }
  div {
    width: 500px;
    height: 500px;
    background: #5776F6;
  }
  #a {
    margin-top: -394px;
    margin-left: -100px;
    transform:rotate(-3.6deg);
  }
  #b {
    margin-top: 71px;
    margin-left: -100px;
    transform:rotate(3.6deg);
  }
</style>

[danieltott]

rotate is a first class property now! rotate: 3.6deg;

[Narigo]

Code Source – 650.08 {218}

Using border approach

<div></div>
<style>
  div{
    border-right:2000px solid #191919;
    border-left:0;
    border-top:125px solid #3210;
    border-bottom:125px solid #3210;
  }
body{
  background:#5776F6;
  display: grid;
  margin: 0
}

Code Source – 776.23 {86}

Using border approach

<style>&{background:conic-gradient(at -95%,#5776F6 86.3deg,#191919 0 93.7deg,#5776F6 0

[danieltott]

dangit forgot all about cones 🙈

[danieltott]

First pass!

Code Source – 143 {characters}

<p><p><style>*{background:#191919}p{width:999;height:999;background:#5776F6;margin:-909-100 0;rotate:-3.55deg}p+p{margin-top:103;rotate:3.55deg

[danieltott]

Improvement -

Code Source – score {125}

<p><p><style>*{background:#191919}p{height:150;background:#5776F6;margin:-46-20 0;rotate:-4grad}p+p{margin:75-20;rotate:4grad

[Devanshukoli]

First Attempt– score {438.33}

<div id='box1'></div>
<div id='box2'></div>
<div id='box3'></div>
<style>
  body {
    margin: 0;
  }
  
  #box1 {
    height: 125px;
    background: #5776F6;
  }

  #box2 {
    height: 50px;
    background: #191919;
    /* border-top: 25px solid transparent; */
	/* border-right: 50px solid #555; */
	/* border-bottom: 25px solid transparent; */
  }
  
  #box3 {
    margin: 0;
    padding: 3px;
    height: 100vh;
    background: #5776F6;
    
  }
</style>

[Devanshukoli]

• Reframing here a bit, after deeply looking into the image.
  ( already figured out how to remove that extra space from putting margin : 0 to body .

1. why not put all the background bluish....
2. just put that conish shape on top of that... ( googled a bit found an article about using css property clip-path )

Attempt 2– 583.36 {358}

<div class="background">
  <div class="conish"></div>
</div>

<style>
  body {
    margin: 0;
  }

  .background {
    background-color: #5776F6;
    height: 100vh;
  }

  .conish {
    position: absolute;
    top: 35%;
    width: 100%;
    height: 30%;
    background-color: #191919;
    clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
  }
</style>