CSS Desde Cero (2018) | Bordes y sombras
Javier Gutiérrez@javiergutierrez
*, *::before, *::after { box-sizing: border-box; }
.box { --border-radius-x: 60px; --border-radius-y: 150px; padding-top: 0.1px; width: 500px; height: 350px; background: hsl(10, 90%, 50%); margin: 100px auto; /* border-radius: 50px; / / border-top-left-radius: 100px; border-top-right-radius: 200px; border-bottom-right-radius: 50px; border-bottom-left-radius: 300px; / / border-radius: 100px 200px 50px 300px; */ border-top-left-radius: var(--border-radius-x) var(--border-radius-y); border-top-right-radius: var(--border-radius-x) var(--border-radius-y); border-bottom-right-radius: var(--border-radius-x) var(--border-radius-y); border-bottom-left-radius: var(--border-radius-x) var(--border-radius-y); }
.play { width: 250px; margin-left: 180px; margin-top: 75px; height: 200px; border-style: solid; border-width: 100px 100px 100px 200px; border-color: transparent transparent; border-left-color: white; }