TL; DR

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

Answer 2

经过一个小时的搞乱，我终于完成了我的解决方案。

TL; DR

JSFiddle Demo

JSFiddle Demo with a kitten(pick this one)

JSFiddle Demo with the unhappy king of all kittens(Actually this one is amazing)

这个解决方案在实施后，呈现这个（当然，减去令人惊讶的手绘圆圈）：

此解决方案不需要方形图像，使用背景图像放置，并且非常容易实现。

让我们开始吧！

首先，我们采用你的漂亮的<img> HTML元素，并将其替换为这种怪异的HTML（它真的不是那么糟糕）：

<div class="image-wrapper">
  <img class="main" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
  <div class="grayscale">
    <img class="gray" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
  </div>
</div>

现在进行一些解释。我们使用两个不同的图像元素，因此我们可以对其中一个进行灰度化。我们不使用背景图片，因为如果您想要使图标更大或图像尺寸不同，则需要进行大量更改。

.image-wrapper是容器div，里面的元素相对于它定位。它的CSS很简单：

.image-wrapper {
  position: relative;
}

（如果您无法理解CSS，请阅读HTML5和CSS3 for dummies。这就是我开始使用css ... #destroying_my_reputation）

.main当然是主要的彩色图像。它的CSS有点复杂，但仍然非常基础：

.main {
  width: 100px;
  border-radius: 100%;
  border: 5px solid #dadad9;
}

如果您更改宽度，宽度可以更改为您想要的任何宽度，请确保您也更改.gray图像的宽度。 border-radius:100%制作一个圆圈，border显然会添加一个边框。

现在进入更复杂的CSS（这一切都非常简单）！

.grayscale是用于保存灰度图像的div。如果您了解CSS，您可以告诉我们发生了什么。

.grayscale {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 50px;
  width: 50px;
  border-radius: 100% 0 0 0;
  background: #009ee3;
  padding-top: 5px;
  padding-left: 5px;
}

div位于.image-wrapper左上角的绝对位置。任何溢出它的东西都是隐藏的。它左上角的border-radius为100％，使其成为四分之一圆形。我们改变它的背景颜色而不是边框，并添加填充。这是因为如果我们使用边框，它会被添加到所有边，弄乱所需的形状。

然后是.gray img：

.gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  width: 100px;
  border-radius: 50% 0 0 0;
}

简单，使用grayscale() CSS过滤器将图像更改为灰度。确保宽度与.main相同。并且边界半径可以添加圆形效果。

那是一个包裹！

And here is the long awaited demo, with all the code

Answer 3

我刚刚创建了一个四分之一圆形的div

.quarter-circle-top-left {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 50%;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 100px 0 0 0;
   -moz-border-radius: 100px 0 0 0;
   -webkit-border-radius: 100px 0 0 0;
   border-left: 4px solid #009ee3;
   border-top: 4px solid #009ee3;
}

并且将div放在图像顶部。它有一个透明的灰色背景和一个顶部和左边的蓝色边框。两者现在都包含在一个包装div中，这样四分之一圆就会有一些相对的东西。

这里是四分之一圈css的来源：http://1stwebmagazine.com/css-quarter-circle（我改变了班级名称，因为他们似乎向我倒退了。）

这里有更新的小提琴：https://jsfiddle.net/ingridly/dtauydrz/1/

更新：

我从其他答案中加入了这个想法，用图像和灰度图填充另一个元素，现在我认为这个答案可以做到：

https://jsfiddle.net/ingridly/dtauydrz/6/

用边框样式制作哈维球css

3 个答案:

TL; DR

让我们开始吧！

那是一个包裹！