Medium Logo

HTML
<div class="medium"> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div>
CSS
body { overflow: hidden; background: #fff; } .medium { margin: calc(50vh - 165px) calc(50vw - 165px); position: relative; width: 110px; height: 225px; transform-origin: top left; transform-style: flat; border-radius: 6px; transform: skewY(26deg); } .medium:before, .medium .two, .medium .three { position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: inherit; transform-origin: inherit; } .medium:before { content: ""; z-index: 3; background: #00AB6C; border-top-right-radius: 3px; } .medium .two { transform: rotateX(-57.75deg) skew(26deg); background: #14C767; z-index: 2; border-bottom-left-radius: 0; border-top-right-radius: 2px; } .medium .three { top: -105px; left: 214px; transform-origin: bottom left; transform: skew(-25deg) translateX(-104.5px); background: #0BE370; z-index: 1; border-top-right-radius: 4px; } .medium .two, .medium .three { border-bottom-right-radius: 0; } .medium .four { position: relative; width: inherit; height: inherit; border-radius: inherit; left: 214px; top: -105px; background: #32FC8D; } .medium:before, .medium .four { border-top-right-radius: 2px; border-bottom-right-radius: 12px; }
JAVASCRIPT
Expand for more options Login