Crear un icono de enfoque de ojo receptivo

He estado tratando de hacer que el icono de color del ojo responda, pero hasta ahora todo lo que he intentado ha sido infructuoso.

Estaba tratando de replicar un poco los colores de un ojo real. Usé borde, sombra de caja, para obtener los colores, pero esa parte no está escalando. Intentó con el esquema también, pero también falló, ese ni siquiera era redondo.

La altura del div es actualmente estática, pero me gustaría que responda. Entonces, todo el ojo se adapta correctamente a diferentes tamaños.

Aquí está mi código:

.eye1 { height: 200px; height: calc(attr(width) / 2.5); width: 75%; background-color: white; border-radius: 50%; position: relative; margin: auto; } .eye2 { background-color: black; width: 8%; height: 12%; border-radius: 50%; border: 0.5em solid #a50; box-shadow: 0 0 0 1.5em #080; position: absolute; top: 40%; left: 45%; } .eye-focus { position: relative; }

jsfiddle si prefieres https://jsfiddle.net/xcxdp92q/

Me gustaría poner mi solución por ahí.
Puede usar background radial-gradient para crear el ojo en un solo elemento.
Al agregar relleno en%, se basa en el ancho del elemento. Use eso para su ventaja para que sea receptivo. Si el relleno es igual al ancho, el elemento será un cuadrado.

 .eye-focus { box-sizing: content-box; height: 0; width: 75%; padding: 30% 0 0 0; margin: 0 auto; border-radius: 50%; background-color: #fff; background-image: radial-gradient(circle, #000 8%, #a50 8%, #0b0 17%, #080 33%, transparent 33%); } 
 

Si solo admite navegadores compatibles con degradados (y los navegadores actuales la mayoría lo hacen), puede usar un div y hacer todos los colores en un degradado radial. Utilicé vw para clasificarlo como sugirió Suthan Bala en su comentario.

 body { background: #EEE; } .eye { border-radius: 50%; background: -moz-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%); background: -webkit-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%); background: radial-gradient(ellipse at center, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1); width: 35vw; height: 35vw; } 
 
 

Intente usar este CSS:

 .eye1 { height: 4vw; width: 4vw; background-color: white; border-radius: 50%; position: relative; margin: auto; } .eye2 { background-color: black; width: 6vw; height: 6vw; border-radius: 50%; border: 1em solid #a50; box-shadow: 0 0 0 3vw #080; position: relative; top: 8vw; left: 43%; } .eye-focus { position: relative; } 

He estado usando vw mucho últimamente (desde hace un año). ¡Muy útil!