Question

我有这个眼形元素

＆＃13;

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;
}

＆＃13;

<div class="paragraph">
  <div class="eye-focus">
    <div class="eye-left"></div>
    <div class="eye-right"></div>
  </div>
  my paragraph text
</div>

＆＃13;

jsfiddle如果你喜欢：https://jsfiddle.net/wneupyr4/

我尝试了很多东西，没有人给我我想要的结果。

我开始阅读伪元素，但这对我来说很新鲜。所以，如果有的话，我无能为力。

基本概念是，如果它们保持居中，那些边缘将使整个眼睛看起来更像真实的眼睛。

Answer 1

如果旋转div 45deg，可以轻松获得两侧的锐利边缘首先将width和padding-top（或底部）设为相同的值，使其成为正方形。
然后使用transform: rotate(45deg)旋转它。最后border-radius 100％到顶部和底部边框以保持眼睛形状此外，您可以使用负边距来减少＆＃34; cut＆＃34;旋转时的一些尺寸（对角线距离更大）。

＆＃13;

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);
}

＆＃13;

<div class="paragraph">
  <div class="eye-focus"></div>
  <div class="ptext">my paragraph text</div>
</div>

＆＃13;

jsfiddle

Answer 2

要制作一只眼睛或“尖椭圆”或“足球”或“stewie head”，你可以在两个对角使用border-radius，让其他角落独立，然后旋转眼睛。

.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>

为眼形元素添加角落

2 个答案:

jsfiddle