CSS Battle #112 – Chevron

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

[Narigo]

Teamwork with @wallclockbuilder – 608.03 {410}

<div o>
<div a></div>
<div b></div>
<div c></div>
</div>
<style>
  body {
    background: #6592CF;
  }
  [o]{
    -webkit-box-reflect:right;
    width: 50%;
  }
  [a],[b],[c] {
    position: absolute;
    top:50%;
    right:50%;
    background: linear-gradient(38.5deg, #0000 78px, #293D7E 0 102px, #0000 0);
    height: 100px;
    width: 125px;
  }
  [b]{
    top:100px;
  }
  [c]{
    top:50px;
  }
</style>

[Narigo]

When building the first solution, @wallclockbuilder and me where trying to figure out how change the 90 degree angle of the border box and all (skew, rotate, changing width/height ratios ...) lead to dead ends that wouldn't really work. How it's solved in this try, see in the spoiler.

Another try – 603.13 {509}

The solution is basically how you'd create arrows for a tooltip or similar. Since these can change the angle, they don't allow a chevron though: This has to be done by putting another light blue "tooltip arrow" on top of the dark blue every time.

<div a></div>
<div b></div>
<div c></div>
<div d></div>
<div e></div>
<div f></div>
<style>
  body {
    background: #6592CF;
    display: grid;
    place-items: center;
    margin-top:146px;
  }
  div {
    border-left: 125px solid #0000;
    border-right: 125px solid #0000;
    border-top: 100px solid var(--c,#293D7E);
    margin-top: var(--t,0);
    width: 0;
  }
  [b] {--t:-175px;--c:#6592CF}
  [c] {--t:-230px}
  [d] {--t:-306px;--c:#6592CF}
  [e] {--t:-360px}
  [f] {--t:-440px;--c:#6592CF}
</style>