html - 为眼睛形状的元素添加 Angular

Question

我这里有这个眼睛形状的元素

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 如果你愿意的话:https://jsfiddle.net/wneupyr4/

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

我开始阅读伪元素，但这些对我来说还很陌生。所以我不能做太多，如果有的话。

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

Answer 1

如果将 div 旋转 45 度，则可以轻松获得两侧的锐边。
首先将其设为正方形，将 width 和 padding-top(或 bottom)设为相同的值。
然后使用transform: rotate(45deg) 来旋转它。最后，将 border-radius 设置为 100% 到顶部和底部边框以保留眼睛形状。
此外，您可以使用负边距来“削减”我们在旋转时获得的一些尺寸(对 Angular 线距离更大)。

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