Как создать фон треугольника CSS на div без использования границы и изображения?

Я знаю, как создавать треугольники с CSS с границами и использовать образы, но в моем случае я хотел бы использовать цвет фона.

Мне нужно что-то вроде этого изображения.

Кто-нибудь может мне помочь?

Ответ 1

Проблема создания треугольников с использованием границ CSS - это их негибкость, когда дело касается стилизации. Таким образом, вы можете использовать относительно полностью псевдоэлементный элемент, предоставляя еще много вариантов стилизации:

Конечно, вы можете сделать, например:

Демо-скрипт

div{
    height:50px;
    width:50px;
    position:relative;
    overflow:hidden;
}
div:after{
    height:100%;
    width:100%;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    content:'';
    display:block;
    position:absolute;
    left:-75%;
    background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
    background-size:cover;
}

Ответ 2

Альтернативой является использование фонового линейного градиента. Хитрость заключается в том, чтобы установить направление вправо справа, установить первый диапазон как белый (или прозрачный), а второй диапазон - как цвет, который вы хотите треугольником.

В следующем примере первая половина фона - белый (от 0% до 50%), а вторая половина (от 50% до 100%) светло-серый.

background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #999 50%, #999 100%);

Обратите внимание, что это свойство поддерживается только современными браузерами (IE 11+, FF 49+)