html - 使用边框样式 css 制作哈维球

Question

我正在尝试为内部有图像的哈维球制作一个 css 样式，但到目前为止我还没有找到正确的方法。这就是我现在拥有的:

.three {width: 43px;
  border-radius: 100%;
  border-style: solid;
  border-width: 4px;
  border-left-color: #dadad9;
  border-top-color: #009ee3;
  border-right-color: #009ee3;
  border-bottom-color: #009ee3;
  width:40px;
  height:40px;
}

.lead-name {
  font-size: 16px;
  font-family:Symantec Sans;
  color:#424242;
  font-weight: 600;
  margin-bottom:0px;
}

.lead-title {
  font-size: 14px;
  font-family:Symantec Sans;
  color:#424242;
  margin-top: -3px;
  margin-bottom: 10px;
}

<div class="lead-designer">
  <img class="three"  src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
  <div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
    <p class="lead-name">Designer Name</p>
    <p class="lead-title">Messaging PO</p>
  </div>
</div>

https://jsfiddle.net/yiluka/dtauydrz/

我想要的是类似的东西

如您所见，我希望圆被直线分割，并对部分图像进行灰度化处理。

我有很多，我真的很想用代码而不是 photoshop 来做，以节省一些劳动力。

Answer 1

你也可以使用伪元素 ::after - https://jsfiddle.net/dtauydrz/3/

HTML:

<div class="image-container">
  <img class="three"  src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
</div>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
          <p class="lead-name">Designer Name</p>
          <p class="lead-title">Messaging PO</p>
</div> 

CSS:

.three {
    border-radius: 100%;
    border-left-color: #dadad9;
    border-top-color: #009ee3;
    border-right-color: #009ee3;
    border-bottom-color: #009ee3;
    width:40px;
    height:40px;
    border-style: solid;
    border-width: 4px;
    border-color: #dadad9;
}

.image-container::after{
    content: "";
    display:block;
    position: absolute;
    margin-top: -52px;
    background-color: #009ee3;
    -moz-border-radius: 25px 0 0 0;
    border-radius: 25px 0 0 0;
    width: 25px;
      height: 25px; 
    opacity: 0.5;
}