How to mirror VueJS' logo properly in CSS-only?

How to mirror VueJS' logo properly in CSS-only?
typescript
Ethan Jackson

I'm trying to replicate the VueJS logo with a CSS-only approach, not by importing an SVG or anything.

I've use clippy to have some proper clip-path, but still there is no way for me to find the proper rotation between the arms of the logo.


This is what I tried so far

.wrapper { height: 100svh; display: flex; flex-direction: row; align-items: center; transform: rotate(-60deg) } .wrapper div { width: 250px; height: 45px; } .left { transform: rotate(-60deg) translate(60%, 200%) scale(-1); } .green { background-color: #42b883; clip-path: polygon(33px 0, calc(100% - 33px) 0, 100% 100%, 0% 100%); } .blue { background-color: #35495e; clip-path: polygon( 66px 0, calc(100% - 66px) 0, calc(100% - 33px) 100%, 33px 100% ); }
<div class="wrapper"> <main class="left"> <div class="blue"></div> <div class="green"></div> </main> <main class="right"> <div class="blue"></div> <div class="green"></div> </main> </div>

I've tried various translations, transforms etc, but none of them seem to be logical, while I thought that applying a 60-degree rotation would be enough.
Turns out it totally didn't.

Answer

You can get it using a single div, using just 2 gradients:

.vue { width: 500px; height: 500px; background-image: linear-gradient(60deg, transparent 54%, green 54%, green 70%, black 70%, black 85%, transparent 85%), linear-gradient(-60deg, transparent 54%, green 54%, green 70%, black 70%, black 85%, transparent 85%); background-size: 50% 100%, 50% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; transform: scale(0.5); }
<div class="vue"></div>

Related Articles