CODEWITHSUNDEEP
htmlcss
user82975
user82975

Reputation: 45

Adding corners to a eye shaped element

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.

Upvotes: 2

Views: 1394

Answers (2)

Michael Coker
Michael Coker

Reputation: 53684

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>

Upvotes: 1

pol
pol

Reputation: 2701

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

Upvotes: 3

Related Questions