CSS Fill Box with rounded borders

Question

I have an example of an area that fills itself on hover, it is done by widening the :before pseudo-element from width 0 to width 100%. The problem I am getting is when the :before element is too narrow its borders won't match those of the parent element, this happens because the borders are rounded, and since circular borders' radii can't be bigger than the smallest of the object's dimensions this is understandable.

This creates a glitch at the beginning of the animation that I don't know how to fix.

I am also trying to find a way to fill the box with a diagonal line instead of the vertical line which is the right border of the pseudo-block, does anyone know a way to do this, ideally with only html and css?

Here's the code I have so far:

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

For the following html element

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

Thanks for the help

@Shahar, I was thinking of something like the image http://imgur.com/8sxUY6Q — tchika, Aug 19 '14 at 19:01
Check this one out: http://stackoverflow.com/questions/17212094/fill-background-color-left-to-right-css — Nightwhistle, Aug 19 '14 at 19:12

imtheman · Accepted Answer · 2019-03-15T17:23:34.097

2

I think this is what you are looking for:

.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>

This is a much better method, as it changes the background, which will always be the correct shape.

edited Mar 15 '19 at 17:23

answered Aug 19 '14 at 20:31

imtheman

4,713
1
30
30

Thanks @imtheman this does exactly what I wanted and is more elegant than my solution, and also by using the angle property of the gradient and a bigger background I can achieve the second effect that I wanted. Very nice solution – tchika Aug 20 '14 at 02:22

score 0 · Answer 2 · answered Aug 19 '14 at 19:59

Your first problem can be done with CSS keyframe animations. What I did was give the element a min-width of 30px, twice the border radius. This stops the corners from being deformed. Then the :before pseudo-element is hidden, and shown on hover. It is then offset 30px to the left with 0 opacity. Hovering causes the opacity to be set to 1 again and stretches the element.

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

This has a little glitch where the initial animated width is 30px, but it is not very noticeable.

JSFiddle

CSS Fill Box with rounded borders

2 Answers2