Las formas CSS se crean mediante el uso de hojas de estilo en cascada para convertir elementos HTML en formas e imágenes. Las formas más básicas incluyen triángulos, cuadrados y círculos, pero se pueden convertir en formas más avanzadas, como corazones, octágonos y estrellas.
На этот вопрос есть ответы en Stack Overflow на русском : Как создать треугольники CSS? Hay muchas formas CSS diferentes en CSS Tricks - Formas de CSS y estoy particularmente perplejo con un triángulo: #triangle-up { width: 0; height: 0; border-left: 50px solid...
¿Cómo creo un menú que se vea así ... Enlace a PSD No quiero usar las imágenes PSD. Preferiría usar iconos de algún paquete como FontAwesome y tener los fondos / css generados en CSS. Aquí puede encontrar una versión del menú que está usando el PSD para generar imágenes de la información sobre...
Me gustaría rodear un número en un círculo como en esta imagen: ¿Es esto posible y cómo se
Quiero tener una página web que tenga una palabra centrada. Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos, es decir, comienza en un punto y dibuja líneas y curvas con el tiempo de modo que el resultado final sea...
¿Cómo creo una forma como esta para mostrar en una página web? No quiero usar imágenes, ya que se volverían borrosas al escalar Intenté con CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius:...
Este es el CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } ¿Cómo produce el círculo de abajo? Supongamos que si el ancho de un rectángulo es de 180 píxeles y la altura es de 180 píxeles, entonces se vería así: Después de aplicar un radio de borde de 30...
Me pregunto si hay una manera más fácil de crear divisiones circulares que lo que estoy haciendo ahora. Actualmente, solo estoy haciendo una imagen para cada tamaño diferente, pero es molesto hacerlo. ¿Hay alguna forma de usar CSS para hacer divs que son circulares y puedo especificar el...
Encontré este ejemplo en stackoverflow: Dibujar círculo usando CSS solo Lo cual es genial. ¿Pero me gustaría saber cómo modificar ese ejemplo para poder incluir texto en el medio del círculo? También encontré esto: centrado vertical y horizontalmente el texto en círculo en CSS (como la insignia...
Si utilizo un valor de píxel o em para el radio del borde, el radio del borde es siempre un arco circular o una forma de píldora, incluso si el valor es mayor que el lado más grande del elemento. Cuando uso porcentajes , el radio del borde es elíptico y comienza en el medio de cada lado del...
¿Es posible controlar la longitud y la distancia entre los trazos de borde punteado en CSS? Este ejemplo a continuación se muestra de manera diferente entre los navegadores: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div>...
¿Cómo se dibuja un círculo usando HTML5 y CSS3? ¿También es posible poner texto
Intento usar un color hexadecimal personalizado para mi triángulo CSS (borde). Sin embargo, dado que usa propiedades de borde, no estoy seguro de cómo hacerlo. Me gustaría mantenerme alejado de javascript y css3 simplemente por compatibilidad. Estoy tratando de que el triángulo tenga un fondo...
Cerrado. Esta pregunta no cumple con las pautas de Stack Overflow . Actualmente no acepta respuestas. ¿Quieres mejorar esta pregunta? Actualice la pregunta para que esté relacionada con el tema de Stack Overflow. Cerrado hace 5 años . Mejora esta...
Ok, entonces todos saben que puedes hacer un triángulo usando esto: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } Y eso produce un triángulo relleno sólido. Pero, ¿cómo harías un triángulo con forma...
Estoy tratando de crear una forma como en la imagen de abajo con un borde inclinado en un solo lado (por ejemplo, el lado inferior) mientras que los otros bordes permanecen rectos. Intenté usar el método de borde (el código se proporciona a continuación) pero las dimensiones de mi forma son...
¿Hay alguna forma de hacer un texto transparente recortado de un efecto de fondo como el de la siguiente imagen, con CSS? Sería triste perder todo el precioso SEO debido a que las imágenes reemplazan al texto. Primero pensé en las sombras pero no puedo descifrar nada ... La imagen es el...
Me encontré con un buen truco de CSS. Mira el violín ... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image:
Estoy tratando de recrear esta imagen con CSS: No lo necesitaría para repetir. Esto es lo que comencé, pero solo tiene una línea recta: #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id="wave"></div> Ejecutar fragmento de códigoOcultar...
Entonces, necesito hacer un patrón hexagonal repetido, usando CSS. Si se necesitan imágenes, puedo ir allí, pero preferiría usar CSS si es posible. Aquí tienes una idea de lo que estoy intentando crear: Básicamente, solo necesito una forma de crear las formas hexagonales y luego superponer...