es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo cambiar el degradado radial a un cuadrado.

12 Jul, 2023 Programación

¿Cómo puedo cambiar el degradado de círculo rojo a un cuadrado?
Eso es todo lo que intento hacer en el código.
¿Es posible hacer esto?
https://jsfiddle.net/ub1nyfqj/

enter image description here

.test {
width: 100px;
height: 100px;
background-image: radial-gradient(red 1px, transparent 1px),
radial-gradient(red 1px, transparent 1px),
linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
background-position: 0 0, -5px -5px, 0 0, 0 0;
}

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el degradado del círculo rojo a un cuadrado, puedes modificar el CSS de la clase .test de la siguiente manera:

    .test {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(45deg,
                         transparent,
                         transparent 7px,
                         rgb(113, 121, 126) 7px,
                         rgb(113, 121, 126) 7.5px,
                         transparent 7.5px,
                         transparent 10px),
                    linear-gradient(-45deg,
                         transparent,
                         transparent 7px,
                         rgb(113, 121, 126) 7px,
                         rgb(113, 121, 126) 7.5px,
                         transparent 7.5px,
                         transparent 10px),
                    linear-gradient(135deg,
                         transparent,
                         transparent 7px,
                         rgb(113, 121, 126) 7px,
                         rgb(113, 121, 126) 7.5px,
                         transparent 7.5px,
                         transparent 10px),
                    linear-gradient(-135deg,
                         transparent,
                         transparent 7px,
                         rgb(113, 121, 126) 7px,
                         rgb(113, 121, 126) 7.5px,
                         transparent 7.5px,
                         transparent 10px);
  background-size: 10px 10px;
}

    Esto reemplaza los degradados radiales con cuatro degradados lineales que crean una forma cuadrada. La propiedad background-image ahora consiste en cuatro degradados lineales, cada uno en un ángulo de 45 grados, con sus colores de inicio y final definidos usando la función rgb(). La propiedad background-size se mantiene igual para ajustar el tamaño de los cuadrados.

Comments are closed.