css - 在现有形状周围添加带有背景颜色的更大形状

Question

我想用 css 背景颜色动态地“填充”一个形状，不想使用图像来解决这个问题。

我现在拥有的:

我想要实现的目标(用蓝色背景色“填充”50%):

我现有的代码是: (HTML)

    <i class="fa fa-gamepad fa-4x award_lvl1 award">
    <span>1</span>
</i>

(CSS)

    /* ==========================================================================
   General Award Styling
   ========================================================================== */
   .award{
    margin: 0;

    -webkit-border-bottom-right-radius: 50%;
-webkit-border-bottom-left-radius: 50%;
-moz-border-radius-bottomright: 50%;
-moz-border-radius-bottomleft: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;

    position: relative;
    width: 70px;
    height: 80px;
    text-align: center;
    z-index: 1;
   }
   .award > span{
    font-size: 0.2em;
    font-weight: bold;
    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    color: black;
    z-index: 2;
   }


/* ==========================================================================
   Awards Lvl1
   ========================================================================== */
   .award_lvl1{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */

   }

Answer 1

基本上，您可以使用元素的叠层来做到这一点。

为容器和 child 提供相同的边界半径，并为容器(或透明边界)提供填充。

在容器中绘制 50/50 灰色/蓝色渐变并将其他渐变应用于子项。 <强> DEMO

/* ==========================================================================
General Award Styling
========================================================================== */
.award > span{
  margin: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;

  position: relative;
  width: 70px;
  height: 80px;
  text-align: center;
  z-index: 1;
  display:inline-block;
  font-size: 0.2em;
  font-weight: bold;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  color: black;
  z-index: 2;
}

/* ==========================================================================
Awards Lvl1
========================================================================== */
.award_lvl1 span{
background: linear-gradient(to right, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
}
.award {
  display:inline-block;
  padding:3px;
  background:linear-gradient(to bottom,gray 50%,turquoise 50%);
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}