soy Kseso y esto EsCSS

Figuras geométricas Css, limones y un panal de rica miel

Figuras geométricas Css, limones y un panal de rica miel

·Por Kseso ✎ 0

Una recopilación de figuras geométricas realizadas en puro Css. Rompiendo ángulos y logrando curvas

Pero antes comenzaré con una señal bien visible del peligro de css xD:

Una advertencia del peligro Css
.nuclear { width: 0; height: 0; border: 100px solid; border-top-color: #000; border-bottom-color: #000; border-left-color: #ff0; border-right-color: #ff0; border-radius: 50%; float: left; margin: 10px 0 0 20px;"> }
Comecocos css

.comecocos_der { width:1px; height:1px; border-right:60px solid transparent; border-top:60px solid yellow; border-left:60px solid yellow; border-bottom:60px solid yellow; border-radius: 50%; }

OjO a esta figura. En chrome si el tamaño (alto y ancho) es cero, al comecocos se lo comen los fantasmas y desaparece. No se muestra. Me llevó un ratito saber a donde había ido.

Para que mire a otro lado sólo es cuestión de darle el valor trasparente al mismo lado hacia el que quieras que mire.

Estola Css. O como le dicen por ahí, ribon Css

.estola { width:0; height:100px; border-right:50px solid #D54421; border-left:50px solid #D54421; border-bottom:30px solid transparent; float: left; }
2 Exágonos: 1 Css + 1 html
Pero todo puede ser mucho más sencillo si elegimos el carácter hexadecimal html:
⬢
.hex:before { border-bottom: 70px solid #6A4021; border-left: 100px solid transparent; border-right: 100px solid transparent; content: " "; height: 0; position: absolute; top: -70px; width: 0; } .hex:after { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 70px solid #6A4021; bottom: -70px; content: ""; position: absolute; width: 0; } .hex { background-color: #6A4021; height: 100px; position: relative; width: 200px; }
A un panal de rico Css dos mil hexágonos acudieron
Un poco de acidez viene bien: limones salvajes

Los valores en border-radius no tienen que ser iguales y simétricos. Alterando los valores se obtienen apariencias que engañen al ojo. Como este limón o los bordes inferiores de esta caja del post o del contenedor que aparece con los resultados de la búsqueda.

.limon { background: #FF0; border: 1px solid #EED900; border-radius: 8px 100px 30px 100px; height: 150px; width: 150px; }
Por falta de huevos que no sea

Seguimos con valores dispares para border-radius para ponerle huevos a este artículo.

.huevo { display:block; width:126px; /* el 70% de height */ height:180px; background-color:#FFE4AC; box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset, -5px -5px 15px rgba(0, 0, 0, 0.1) inset; -webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; /* bug en Safari*/ border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso