Как сделать такой hover эффект?

Question

[Игорь Мясников]

Как сделать такой hover эффект?

Answer 1

[Ivan Bogachev]

background:
    linear-gradient(135deg, transparent, rgba(255,255,255,.1)),
    linear-gradient(to top, #999,  transparent),
    linear-gradient(to left, #999, transparent);
background-repeat: no-repeat;
background-position: top left, top right, bottom right;
background-size: 100% 100%, 1px 100%, 100% 1px;

codepen

Comments

[Максим]

Иван а чем postCSS удобнее обычного CSS ? Вроде бы тоже самое написано в каскадах !

[Ivan Bogachev]

Максим Ленский, на codepen у меня postcss просто включен по умолчанию, в этом примере никакими возможностями не пользовался. В своих проектах я с его помощью добавляю импорты, фиксы, о которых постоянно забываю, cssnext, предупреждения об использовании свойств, которые не поддерживаются заданными браузерами (doiuse), дальше по настроению. Получается довольно удобно, при этом ничего лишнего.

Answer 2

[Дима Паутов]

Наклонный градиент + before и after линии по бокам закрашенные в градиент

Comments

[Игорь Мясников]

можно немного поподробнее , если не сложно

[Сергей Горячев]

Игорь Мясников, куда подробнее? код написать готовый?