带有圆角边框的CSS填充框

Question

我有一个在悬停时填充自己的区域的例子，它是通过将:before伪元素从宽度0加宽到宽度100％来完成的。我得到的问题是当:before元素太窄时，它的边界将与父元素的边界不匹配，这是因为边框是圆的，并且因为圆形边框的半径不能大于对象的最小值尺寸这是可以理解的。

这会在动画开始时产生一个小故障，我不知道如何修复。

我也试图找到一种方法用对角线填充框，而不是垂直线，这是伪块的右边界，有没有人知道这样做的方法，理想情况下只有html和CSS？

这是我到目前为止的代码：

http://jsfiddle.net/tchikago/egtLx4re/2/

.fillingBox {
    position: relative;
    width: 300px;
    height: 50px;
    background: green;
    border-radius: 15px;
}
.fillingBox:before {
    content:"";
    position: absolute;
    background: red;
    bottom: 0;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 15px;
    right: 100%;
    transition: right 2s;
}
.fillingBox:hover:before {
    right: 0;
}

对于以下html元素

<div class="fillingBox"></div>

谢谢您的帮助

Answer 1

我认为这就是你要找的东西：

.fillingBox {
  position: relative;
  width: 300px;
  height: 50px;
  text-align: center;
  background: green;
  background: linear-gradient(to left, green 50%, red 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  border-radius: 15px;
  transition: all 1s ease;
}

.fillingBox:hover {
  background-position: left bottom;
}

<div class="fillingBox"></div>

这是一种更好的方法，因为它会改变背景，这将始终是正确的形状。

Answer 2

您可以使用CSS关键帧动画完成第一个问题。我所做的是给元素一个30px的min-width，两倍的边界半径。这可以防止角落变形。然后隐藏:before伪元素，并在悬停时显示。然后向左偏移30px，不透明度为0。悬停会导致不透明度再次设置为1并拉伸元素。

.fillingBox:before {
    /* other stuff */
    display: none;
    min-width:30px;
    /* other stuff */
}
.fillingBox:hover:before {
    display: block;
    animation: redfill 600ms linear;
    animation-fill-mode: forwards;
}
@keyframes redfill {
    0% {
        opacity: 0;
        left: -30px;
        right: 100%;
    }
    1% {
        opacity: 0;
        left: 0px;
        right: 100%;
    }
    2% {
        opacity: 1;
        left: 0px;
        right: 100%;
    }
    100% {
        opacity: 1;
        left:0%;
        right: 0%;
    }
}

这有一点小故障，初始动画宽度为30px，但不是很明显。

JSFiddle