Articles of css shapes

¿Cómo se logran las esquinas de borde CSS biseladas en lugar de las esquinas redondeadas?

Con la propiedad CSS border-radius , puedo tener una esquina redondeada curvilínea y redondeada al final. .boxLeft{ border-right: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 10px 0; } .boxRight{ border-left: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 0 10px; } Pero quiero un rincón de borde como la imagen […]

Forma doble curvada

Actualmente estoy intentando generar una forma de ‘fondo fantasmal ondulado’. Esta forma contiene dos curvas dobles: Aunque la parte inferior de esta imagen creo que la retrata en mejores imágenes. Mi código Mi bash actual de generar esta forma estaba usando pseudoelementos y overflow: hidden , aunque esto no permite un fondo degradado (requeriría un […]

Cómo crear una imagen fluida trapezoidal con CSS?

Estoy trabajando en un sitio web en el que tenemos efecto de paralaje. En eso hay algunas imágenes que tienen forma de triángulo, como esta & la imagen es transparente porque se superpone al DIV anterior. Estoy intentando muchas cosas con CSS. pero no obtuvo el resultado deseado. Logro ese resultado deseado con ancho fijo. […]

¿Cómo puedo hacer un div con formas irregulares con css3 y html5?

Me pregunto si existe alguna posibilidad de construir div con formas irregulares, algo similar a esto (por ejemplo, Groenlandia, Europa, África). Quiero crear un mapa como aquí usando CSS3 y HTML5. Aquí hay un enlace a una imagen de ejemplo:

DIV cuadrado donde la altura es igual a la ventana gráfica

Necesito crear un DIV donde width=height y height=100% de la ventana (que, obviamente, es variable). En otras palabras, un DIV perfectamente cuadrado que calcula sus dimensiones en función de la altura de la ventana gráfica . Los elementos dentro de ese DIV tomarán sus dimensiones como porcentajes del alto y ancho del DIV padre. Me […]

Hacer borde de triángulo irregular en CSS

Tengo una forma con un borde como este en Photoshop: ¿Es posible hacer los triangularjs repetidos como un borde con CSS?

Animación de agua de relleno

Estoy tratando de obtener una animación de limpieza para hacer que un círculo parezca estar lleno de agua . Me he encontrado con dos errores y no he podido abordar el tercero: Se llena de la manera incorrecta Se restablece a vacío (negro) después de que se haya llenado * Por ahora, estoy usando las […]

Crear una forma trapezoidal de Isoceles

Me pregunto si podría producir algo similar a esto con CSS: Y también me pregunto si este es el lugar correcto para una pregunta semejante. No he intentado nada de código, he hecho las imágenes marrones con Photoshop. Gracias por cualquier ayuda !

Forma de mitad de hexágono con un elemento

Estoy tratando de replicar la siguiente forma sin éxito: Supongo que necesitaré algo :before y :after pseudo elementos junto con el siguiente css: #pentagon { position: relative; width: 78px; height:50px; background:#3a93d0; }

Cómo dibujar un trapecio / trapecio con css3?

Cuando vaya a la página http://m.google.com con Mobile Safari, verá la hermosa barra en la parte superior de la página. Quiero dibujar algunos trapecios (EE. UU .: trapezoides) así, pero no sé cómo. ¿Debo usar css3 3d transform? Si tienes un buen método para lograrlo, dímelo.