CSS - эффект диагонального разделения наведения

Question

Можно ли использовать диагональный разбитый фон (как на изображении) только css (без фонового изображения)? Diagonal hover effect in the menu

Answer 1

Нечто вроде this?

Если это желаемый стиль, вы можете найти более подробную информацию о w3schools и MDN

.btn { 
 
    width: 250px; 
 
    height: 60px; 
 
    margin: 25px; 
 
    border-radius:4px; 
 
    background: linear-gradient(to bottom right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); 
 
}

<button class="btn">Button 
 
</button>

Answer 2

Yeah- использования градиен, если вы не хотите фона IMG.

вы можете использовать этот генератор, если вы хотите http://www.colorzilla.com/gradient-editor/