Как сделать как срезаные углы с прозрачным фоном?

Question

[Genexys]

подскажите как сделать как на картинке, ниже так как пока смог сделать

вот код для правки

решение

%line_bg{
            position: relative;
            height: 100px;
            background-repeat: no-repeat
    }
    .
    .yellow_line {
        float: left;
        width: 65%;
        @extend %line_bg;
        background-color: $yellow;
        &:before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            right: 0;
            bottom: 0;
            border-bottom: 100px solid #FFF; 
            border-left: 100px solid transparent; 
                }
        }

    .blue_line {
        float: right;
        width: 35%;
        @extend %line_bg;
        background-color: $blue;
        &:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: 0;
            bottom: 0;
            border-top: 100px solid #FFF; 
            border-right: 100px solid transparent; 
                }
    }
}

<div class="line_wrap">
		<div class="yellow_line">
		</div>
		<div class="blue_line">
		</div>
</div>

Comments

[Сергей]

цвет выбрать полупрозрозный может? rgba(255, 255, 255, 0.4);

[Genexys]

Сергей: пробывал, появляется фон линии, может я не правильно что то расположил

[Сергей]

Попробуйте залить на codepen.io может кто наглядно поможет

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/NqQMBN

Но у вас тень... Это сложнее...
И решение у меня не адаптивное...

Comments

[Genexys]

можно конечно media, но все равно спасибо) Подожду может еще кто предложит

[Андрей Федоров]

Себе я бы сделал картинками. Серьезно.

[Genexys]

Андрей Федоров: просто мне еще текст писать на них

[Андрей Федоров]

Ну и что. Картинки - это же бэкграунд. Будешь тень делать все равно без картинок не обойтись.

Смотри
codepen.io/aliencash/pen/bdXMPw

[Андрей Федоров]

Блин кривовато правда. Ну допилишь сам...

[Genexys]

Андрей Федоров: о то что надо спасибоооо

Answer 2

[Ksider]

с тенями можно так codepen.io/ksider/pen/JdgZRV

Answer 3

[GreatRash]

Картинки уже не в моде?

Comments

[Genexys]

мне еще текст на них писать..

[GreatRash]

Genexys: background кагбэ