Css 背景色只需要覆盖其元素的一定百分比

我的结构如下：

<li class="myclass" ng-class="myAngularClass">
  <div> div1
     <div> div2
     </div>
  </div>
</li>

第一组
第二组

元素

li

具有动态高度和宽度<代码>“myAngularClass”具有属性

背景色：绿色

背景色覆盖整个

li

，它覆盖了其中的所有

div

s。但我希望背景色的宽度仅为10%，这样它的跨度就只有div1。我已经看到了链接，但是我没有太多的灵活性来添加其他标签。“myAngularClass”返回一个字符串，该字符串的计算结果为类名，我在该类名中编写了background color属性，以便li具有正确的背景颜色

简言之，我正在寻找一种方法，使元素具有背景色（例如背景色宽度），但只具有一定的长度

---

请告诉我这是否可行

您无法控制

背景色

属性，但您可以控制渐变宽度，因此您可以创建实际上仅由一种颜色构成的渐变：

background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,1) 10%,rgba(0,255,0,0) 10%,rgba(0,0,0,0) 100%); /* W3C */

对于跨浏览器支持，您可以使用以下工具：

您也可以使用背景中的图像来执行此操作