HTML
CSS
JS
Result
HTML
<div class="netflix-box"> <div class="inner-side left"></div> <div class="inner-side center"></div> <div class="inner-side right"></div> </div>
CSS
:root { --bg-color: #000; --red: #E52111; --shadow-red: #B1170F; } html, body { height: 100%; display:flex; justify-content: center; align-items: center; background: var(--bg-color); } .netflix-box { overflow: hidden; position: relative; display: flex; } .inner-side { height: 360px; width: 75px; margin-bottom: 2px; background: var(--red); } .inner-side:not(.center) { background: var(--shadow-red); } .inner-side.center { transform: skewX(22.5deg); netflix-box-shadow: 0px 0px 30px -20px black; } .netflix-box::after { content: ''; position:absolute; width: 175%; left: 50%; bottom: -98px; transform: translateX(-50%); height: 110px; border-radius: 100%; background: var(--bg-color); }
JS
Netflix Logo using HTML and CSS