Adding corners to a eye shaped element - html

Question

I have this eye shaped element here
body {
background: grey;
}
.eye-focus {
box-sizing: content-box;
width: 75%;
padding: 30% 0 0 0;
margin: 0 auto;
border-radius: 50%;
background-image: radial-gradient(circle, #000 8%, #a50 8%, #0b0 18%, #080 35%, #fff 35%);
position: relative;
}
.eye-left {
position: absolute;
left: -4%; top: 32%;
border-right: 2em solid white;
border-bottom: 2em solid transparent;
border-top: 2em solid transparent;
}
.eye-right {
position: absolute;
right: -4%; top: 32%;
border-left: 2em solid white;
border-bottom: 2em solid transparent;
border-top: 2em solid transparent;
}
<div class="paragraph">
<div class="eye-focus">
<div class="eye-left"></div>
<div class="eye-right"></div>
</div>
my paragraph text
</div>
jsfiddle if you'd prefer: https://jsfiddle.net/wneupyr4/
I've tried many things and none gave me the result I wanted.
I started reading into pseudo elements, but those are pretty new to me. so I couldn't do much, if some at all.
The basic concept is that those edges will make the whole eye look even more like a real one, if they will stay centered.

Answer 1

If you rotate the div 45deg, you can easily get the sharp edges on the sides.
First make it a square, by putting the width and padding-top(or bottom) be the same value.
Then use transform: rotate(45deg) to rotate it. And finally border-radius of 100% to top and bottom borders to retain the eye shape.
Additionally you can use a negative margin to "cut" some of the size we get when rotating (there is a bigger distance diagonally).
body {
background: grey;
}
.eye-focus {
box-sizing: content-box;
width: 55%;
padding-top: 55%;
margin: -10% auto; /* negative margin to account for the rotation */
border-radius: 100% 0;
background-image: radial-gradient(circle, #000 8%, #a50 8%, #0b0 18%, #080 35%, #fff 35%);
transform: rotate(45deg);
}
<div class="paragraph">
<div class="eye-focus"></div>
<div class="ptext">my paragraph text</div>
</div>
jsfiddle

Answer 2

To make an eye or a "pointy ellipse" or "football" or "stewie head", you can just use border-radius on 2 opposite corners, leave the other corners alone, then rotate the eye.
.eye {
width: 10vw;
height: 10vw;
background: #000;
border-radius: 0 50%;
transform: rotate(-45deg);
transform-origin: 100% 0; /* to position/keep the elemen on the page after rotation. use this as you see fit */
}
<div class="eye"></div>