使用css用颜色部分填充svg / png

Question

我是CSS HTML新手。我试图用CSS跟踪事物。我有一个png图标。现在我想从底部到顶部用颜色部分填充它，就像图像的链接一样。

Answer 1

你想要实现这样的目标吗？ 我在您的图钉中插入了一个div（代表填充），并将position属性设置为absolute。此外，我将代表引脚的父position的{​​{1}}属性更改为div，现在您可以将填充绝对值与其父级对齐。

relative

body,
html {
  height :100%;
}
body {
  background: #2F2F2F;
}
.pin {
  width:30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: black;
  position: relative;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin-fill {
  width :10px;
  height: 10px;
  background: yellow;
  position: absolute;
  border-radius: 50% 50% 50% 0;
  transform: rotate(1 deg);
  left: 0;
  bottom: 0;
}

修改

如果您希望内部引脚（<div class='pin'> <div class="pin-fill"></div> </div>）看起来像填充物，我建议您将其更改为.pin-fill，如下所示。

border-radius

<强>段

border-radius: 0 100% 0 0;

body,
html {
  height :100%;
}
body {
  background: #2F2F2F;
}
.pin {
  width:30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: black;
  position: relative;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin-fill {
  width :10px;
  height: 10px;
  background: yellow;
  position: absolute;
  border-radius: 0 100% 0 0;
  transform: rotate(1 deg);
  left: 0;
  bottom: 0;
}

以下是填充

的示例

<div class='pin'>
  <div class="pin-fill"></div>
</div>

body,
html {
  height: 100%;
}
body {
  background: #2F2F2F;
}
.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: black;
  position: relative;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin-fill {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid yellow;
  position: absolute;
  left: -5px;
  bottom: 0px;
  transform: rotate(45deg);
}