¿Cómo crearía una ruta de recorte para este diseño?

.test02 { text-align: center; color: #fff; background-color: orange; border-top-right-radius: 8px; border-top-left-radius: 8px; padding: 0,2rem 0; } .test { border: 2px solid orange; padding: 1rem; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; height: 5rem; } body { background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350'); }

Si desea hacerlo ahora, marque la casilla a continuación

Sé que quiero hacer un clip-path para esto, pero no sé cómo. Este tipo de estilo CSS es un poco avanzado para mí. Puedo hacer un borde muy bien, pero no sé cómo podría hacer un borde de adentro hacia afuera si eso tiene sentido.

davy.ai

May 27, 2023 at 5:42 am

Para crear un clip-path, se puede usar la propiedad CSS clip-path. Primero, se debe decidir la forma en la que se quiere recortar el elemento. Se puede crear una forma personalizada utilizando una ruta SVG o se pueden utilizar una de las formas básicas proporcionadas por CSS. Por ejemplo, para crear una forma de círculo, se puede utilizar el siguiente código:

.test {
  clip-path: circle(50%);
}

Esto recortará el elemento en una forma de círculo con un radio del 50%. Se puede ajustar el tamaño y la forma cambiando el valor de la función circle().

Para crear un borde que aparezca hacia adentro, se puede usar la propiedad CSS outline. La propiedad outline es como un borde, pero se dibuja fuera del contenido del elemento, por lo que no afecta el tamaño ni la posición del elemento. Se puede ajustar el grosor y el estilo del contorno utilizando las propiedades outline-width y outline-style. Por ejemplo:

.test {
  outline: 2px solid orange;
  outline-offset: -2px;
}

Esto creará un contorno sólido de color naranja con un grosor de 2px y un desplazamiento de -2px, lo que hará que el contorno aparezca dentro del borde del elemento. Se pueden ajustar los valores para lograr el efecto deseado.

Answer

davy.ai

May 27, 2023 at 5:42 am
Para crear un clip-path, se puede usar la propiedad CSS clip-path. Primero, se debe decidir la forma en la que se quiere recortar el elemento. Se puede crear una forma personalizada utilizando una ruta SVG o se pueden utilizar una de las formas básicas proporcionadas por CSS. Por ejemplo, para crear una forma de círculo, se puede utilizar el siguiente código:
```
.test {
  clip-path: circle(50%);
}
```
Esto recortará el elemento en una forma de círculo con un radio del 50%. Se puede ajustar el tamaño y la forma cambiando el valor de la función circle().

Para crear un borde que aparezca hacia adentro, se puede usar la propiedad CSS outline. La propiedad outline es como un borde, pero se dibuja fuera del contenido del elemento, por lo que no afecta el tamaño ni la posición del elemento. Se puede ajustar el grosor y el estilo del contorno utilizando las propiedades outline-width y outline-style. Por ejemplo:
```
.test {
  outline: 2px solid orange;
  outline-offset: -2px;
}
```
Esto creará un contorno sólido de color naranja con un grosor de 2px y un desplazamiento de -2px, lo que hará que el contorno aparezca dentro del borde del elemento. Se pueden ajustar los valores para lograr el efecto deseado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo crearía una ruta de recorte para este diseño?

Answer

davy.ai