Declaración del problema: crea un bigote usando CSS.
- Pasos para crear Bigote:
- Paso 1:
- Cree un círculo de color negro con un radio del 50%, ancho y alto de 180px.
- Para mantener el círculo en el medio, agregue 350 px a su izquierda.
- También para hacer que el círculo sea visible, agregue un color de fondo como color actual.
- El beneficio de currentColor es cambiar el logotipo de color para que el fondo cambie automáticamente.
- La codificación HTML se realizará para agregar la clase div en el cuerpo.
<html><head><metacharset="UTF-8"><title>mustache</title><metaname="viewport"content="width=device-width, initial-scale=1"><style>.mustache {width:180px;height:180px;left:350px;border-radius:50%;position:absolute;color:black;background-color:currentColor;}</style></head><body><divclass="mustache"></div></body></html>Producción:
- Paso 2:
- Agregue la sombra del cuadro para tener dos círculos en el medio de la página.
- Las dimensiones de la sombra serán 150px 2410px 0 0 color actual.
- Las dimensiones anteriores son x offset, y offset, spread, blur y color.
<html><head><metacharset="UTF-8"><title>mustache</title><metaname="viewport"content="width=device-width, initial-scale=1"><style>.mustache {width:180px;height:180px;left:350px;border-radius:50%;position:absolute;color:black;background-color:currentColor;box-shadow:150px 240px 0 0 currentColor,300px 240px 0 0 currentColor;}</style></head><body><divclass="mustache"></div></body></html>Producción:
- Paso 3:
- Ahora, no hay necesidad de un círculo anterior, la única necesidad es su sombra. Por lo tanto, elimine el círculo original.
- Agregue el elemento anterior al div y agregue la posición, la parte superior, el ancho, la altura y el borde.
- También agregue el radio del borde hasta donde debe ir el arco para formar el bigote.
- Fije el origen de la rotación para que el extremo del bigote izquierdo quede con precisión y luego gírelo en un ángulo de -40 grados.
<html><head><metacharset="UTF-8"><title>mustache</title><metaname="viewport"content="width=device-width, initial-scale=1"><style>.mustache{width:180px;height:180px;left:350px;border-radius:50%;position:absolute;color:black;box-shadow:150px 240px 0 0 currentColor,300px 240px 0 0 currentColor;}.mustache::before{content:"";position:absolute;left:30px;top:120px;width:210px;height:120px;border-bottom:solid 180px currentColor;border-radius:0 0 0 100%;transform:rotate(-40deg);transform-origin:right 210px;}</style></head><body><divclass="mustache"></div></body></html>Producción:
- Paso 4:
- Ahora el bigote izquierdo está listo, así que agregue el elemento after al div.
- Agregue la posición, la parte superior, el ancho, la altura y el borde como se hizo en el elemento anterior.
- También agregue el radio del borde hasta donde debe ir el arco para formar el bigote.
- Fije el origen de la rotación para que el extremo del bigote derecho también llegue con precisión y luego gírelo en un ángulo de 40 grados.
<html><head><metacharset="UTF-8"><title>mustache</title><metaname="viewport"content="width=device-width, initial-scale=1"><style>.mustache{width:180px;height:180px;left:350px;border-radius:50%;position:absolute;color:black;box-shadow:150px 240px 0 0 currentColor,300px 240px 0 0 currentColor;}.mustache::before{content:"";position:absolute;left:30px;top:120px;width:210px;height:120px;border-bottom:solid 180px currentColor;border-radius:0 0 0 100%;transform:rotate(-40deg);transform-origin:right 210px;}.mustache::after{content:"";position:absolute;left:390px;top:120px;width:210px;height:120px;border-bottom:solid 180px currentColor;border-radius:0 0 100%0;transform:rotate(40deg);transform-origin:left 210px;}</style></head><body><divclass="mustache"></div></body></html>Producción:
