Reto cunplido Logo de Youtube
Aquí les presento mi solución:
HTML
<div class="youtube">
<div class="play"></div>
</div>
CSS
En la solución se usan variables para calcular los demás valores automáticamente, por lo tanto se puede ingresar tan solo el ancho deseado del logo en la variable --ancho y tanto el alto como la figura de Play y los bordes-radius se calcularán automáticamente.
*{
box-sizing: border-box;
}
:root{
--ancho: 500px; /* Ingresar un ancho y lo demas se autocalculará */
--alto: calc(var(--ancho) / 1.46); /* Alto del logo */
--ancho-p: calc(var(--ancho) / 3.9); /* Ancho del Play */
--alto-p: calc(var(--alto) / 2.3); /* Alto del Play*/
--med-alto-p: calc(var(--alto-p) / 2); /* Mitad de la altura de Play */
}
.youtube {
--brx: 15%; /* Border radius X */
--bry: 30%; /* Border radius Y */
background: red;
padding-top: 0.1px; /* Evitar solapado de margenes verticales */
margin: 100px auto;
width: var(--ancho);
height: var(--alto);
position: relative; /* Usado para el centrado vertical del elemento Play */
border-radius: var(--brx) / var(--bry);
}
.play {
color: transparent; /* Los bordes heredan este color por defecto */
margin: auto; /* Centrado horizontal */
position: absolute; /* Usado para el centrado vertical */
top: 0; left: 0; bottom: 0; right: 0; /* Usado para el centrado vertical */
width: var(--ancho-p);
height: var(--alto-p);
border-style: solid;
border-left-color: white;
border-width: var(--med-alto-p) 0 var(--med-alto-p) var(--ancho-p);
}
Seguimos aprendiendo. JL
