Fill Element with Slanted Background on Hover

Fill element with slanted background on hover

I believe that you are actually looking for the end state to fill the entire element with background color and not leave the gap. You could also do it with linear-gradient background images and transition their background-size and background-position like in the below snippet.

One disadvantage of using linear-gradient over pseudo-elements or transforms is that the browser support is lower but it doesn't need extra pseudo-elements and so can leave them spare for other use.

.button_sliding_bg {  color: #31302B;  background: #FFF;  padding: 12px 17px;  margin: 25px;  font-family: 'OpenSansBold', sans-serif;  border: 3px solid #31302B;  font-size: 14px;  font-weight: bold;  letter-spacing: 1px;  text-transform: uppercase;  border-radius: 2px;  display: inline-block;  text-align: center;  cursor: pointer;  background-image: linear-gradient(135deg, #31302B 50%, transparent 51%);  background-size: 100px 100px; /* some initial size to get the slanted appearance */  background-position: -50px -50px; /* negative positioning to hide it initially */  background-repeat: no-repeat;  transition: all ease 0.8s;}.button_sliding_bg:hover {  background-size: 200% 200%; /* 200% because gradient is colored only for 50% */  background-position: 0px 0px; /* bring it fully into view */  color: #FFF;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><button class="button_sliding_bg">Buttontext</button><button class="button_sliding_bg">Button text lengthy</button><button class="button_sliding_bg">Button text <br> with line break</button><button class="button_sliding_bg">Button text <br> with <br> multiple <br> line <br>breaks</button>

Fill background color left to right CSS

The thing you will need to do here is use a linear gradient as background and animate the background position. In code:

Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the element's width (width:200%, height:100%), then tell it to position the background right.

background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

On hover, change the background position to left and with transition:all 2s ease;, the position will change gradually (it's nicer with linear tough)

background-position: left;

http://jsfiddle.net/75Umu/3/

As for the -vendor-prefix'es, see the comments to your question

extra:

If you wish to have a "transition" in the colour, you can make it 300% width and make the transition start at 34% (a bit more than 1/3) and end at 65% (a bit less than 2/3).

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

Demo:

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

<div>Hover me</div>

Slanted Div Hover Troubles

You seem to have the right idea, using both the unskew and intuitive to using the skew, however, something like the below example may work for you:

html {  background: radial-gradient(#222, blue);  height: 100%;}div.wrap{    height: 150px;  width: 300px;  position: relative;  overflow: hidden;  }div.innerwrap {  height: 100%;  width: 100%;  transform: skewX(-30deg);  position: absolute;top:0;left:0;  overflow: hidden;  margin-left: -70px;  transition: all 0.4s;  border-right: 5px solid tomato;  cursor:pointer;}div.innerwrap:hover span {  background: gold;}div.innerwrap:before {  content: "";  position: absolute;  top: 0;  right: 0;  width: 100%;  height: 100%;  background: url(http://lorempixel.com/300/300);  transform: skewX(30deg);  transform-origin: top left;}div span {  position: absolute;  bottom: 0;  left: 0%;  width: 120%;  transform: skewX(30deg);  background: red;  text-align:center;  transition: all 0.4s;}

<div class="wrap">  <div class="innerwrap">  <span>TITLE</span></div>  </div>

CSS diagonal mousemove fill on hover

You can try something like this:

   $('.green').on('mousemove', function(e) {
  if (e.pageX < $(this).width());
  var percent = e.pageX - $(this).offset().left * 100 / $(this).width();
  $(this).css({
    'background': 'linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) ' + percent + '%,rgba(0,0,0,0) ' + (percent + 0.1) + '%,rgba(0,0,0,0) 100%)'
  });
});

demo:https://jsfiddle.net/sdq5z7ej/4/

Fill entire angled li tag on hover

I think you need a different approach, here is an idea using pseudo element and skew:

section ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: none;
  margin: .5em 1em;
}

li {
  position: relative;
  padding: 0.3em 0.8em;
  cursor: pointer;
  z-index: 0;
}

li:before,
li:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 70%;
}

li:before {
  left: -1px;
  border-left: 2px solid #000;
}
li:after {
  right: -1px;
  border-right: 2px solid #000;
}

li:after,
li:nth-child(odd):before {
  transform: skewX(-15deg)
}
li:before,
li:nth-child(odd):after {
  transform: skewX(15deg)
}

li:hover {
  color: #fff;
}

li:hover:before,
li:hover:after {
  background: #000;
}

<section>
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
    <li><a>Link 4</a></li>
  </ul>
</section>

Shape with a slanted side (responsive)

There are many ways to create the shape with a slanted edge only on one side.

The following methods cannot support dynamic sizes as already mentioned in the question:

• Border triangle method with pixel values for border-width.
• Linear gradients with the angle syntax (like 45deg, 30deg etc).

The methods that can support dynamic sizes are described below.

---

Method 1 - SVG

(Browser Compatibility)

SVG can be used to produce the shape either by using polygons or paths. The below snippet makes use of polygon. Any text content required can be positioned on top of the shape.

$(document).ready(function() {  $('#increasew-vector').on('click', function() {    $('.vector').css({      'width': '150px',      'height': '100px'    });  });  $('#increaseh-vector').on('click', function() {    $('.vector').css({      'width': '100px',      'height': '150px'    });  });  $('#increaseb-vector').on('click', function() {    $('.vector').css({      'width': '150px',      'height': '150px'    });  });})

div {  float: left;  height: 100px;  width: 100px;  margin: 20px;  color: beige;  transition: all 1s;}.vector {  position: relative;}svg {  position: absolute;  margin: 10px;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  z-index: 0;}polygon {  fill: tomato;}.vector > span {  position: absolute;  display: block;  padding: 10px;    z-index: 1;}.vector.top > span{  height: 50%;  width: 100%;  top: calc(40% + 5px); /* size of the angled area + buffer */  left: 5px;  }.vector.bottom > span{  height: 50%;  width: 100%;  top: 5px;  left: 5px;  }.vector.left > span{  width: 50%;  height: 100%;  left: 50%; /* size of the angled area */  top: 5px;  }.vector.right > span{  width: 50%;  height: 100%;  left: 5px;  top: 5px;  }

/* Just for demo */
body {  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);}
polygon:hover, span:hover + svg > polygon{  fill: steelblue;}
.btn-container {  position: absolute;  top: 0px;  right: 0px;  width: 150px;}
button {  width: 150px;  margin-bottom: 10px;}
.vector.left{  clear: both;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="vector bottom">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 40,0 40,100 0,60" />  </svg></div><div class="vector top">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,40 40,0 40,100 0,100" />  </svg></div><div class="vector left">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 40,0 40,100 20,100" />  </svg></div><div class="vector right">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 20,0 40,100 0,100" />  </svg></div>
<div class='btn-container'>  <button id="increasew-vector">Increase Width</button>  <button id="increaseh-vector">Increase Height</button>  <button id="increaseb-vector">Increase Both</button></div>

---

Related Topics