CSS Desde Cero (2018) | Bordes y sombras
Jaime Cisternas@jaimecisternas
*, *::before, *::after{ box-sizing: border-box; } body{ --border-radius-50: 50px; --border-radius-150: 150px } .box-top{ width: 420px; height: 30px; margin-left: 220px; margin-top: 100px; background:hsl(10,90%, 50%); border-top-right-radius: 150px 25px ; border-top-left-radius: 150px 25px ; }
.box-center{ width: 500px; height: 350px; background:hsl(10,90%, 50%); margin: -11px 180px 0 180px; padding-top: 110px; border-top-right-radius: var( --border-radius-50) var( --border-radius-150); border-bottom-right-radius: var( --border-radius-50) var( --border-radius-150); border-top-left-radius: var( --border-radius-50) var( --border-radius-150); border-bottom-left-radius: var( --border-radius-50) var( --border-radius-150); } .box-bottom{ width: 430px; height: 30px; margin: -12px 100px 0 215px; background:hsl(10,90%, 50%); border-bottom-right-radius: var( --border-radius-150) var( --border-radius-50); border-bottom-left-radius: var( --border-radius-150) var( --border-radius-50); } .play{ height: 100px; width: 100px; margin-left: 220px; border-width: 50px 50px 50px 80px ; border-style: solid; border-color: transparent transparent transparent white; }