div вырезать кусочек
 

Здравствуйте. Подскажите, пожалуйста, нужно сделать треугольники как на этом сайте
https://i.gyazo.com/1fe3dc7f38026f04...24092d8560.png

Понятно, как это реализуется на нём. Просто добавляется треугольник залитый одним цветом.

https://i.gyazo.com/a90501e0f2085688...e515de3fb2.png

Но на моём сайте фон не однородный и это не прокатит. Не знаю, что делать. Спасибо за ответы.

css style--------------------------------
 

Сделал как смог. На фотошопе лучше выйдет



body{
padding:0;
margin: 0;
background-color: #0293fd;
}

div {
position: relative;
width: 1000px;
margin: 20px auto;
height: 100px;
background-color: orange;
}
div::after{
content: "";
position: absolute;
display: block;
width: 1px;
border: 10px solid transparent;
border-top-color:#0293fd;
left: 50%;
margin: 0 0 -10px -10px;
}

div::before{
content: "";
position: absolute;
width: 1px;
display: block;
border-bottom-color:white;
top: 80px;
border: 10px solid transparent;
border-top-color:orange;
left: 50%;
margin: 20px 0 -10px -10px;
}

</style>

<div class="block">



</div>

День добрый!

2 варианта выше не совсем то, что требуется, насколько понял. Задача решается немного иначе, но в принципе, её можно решить границами (border).

Но это далеко не единственный способ рисовать треугольники. :) Это можно сделать и трансформациями. Метод трансформаций более гибок, но и более сложен в реализации.

Например, так:

<iframe width="800" height="550" src="http://embed.plnkr.co/enJ5gJos5a2yWYKU2Nyz/" frameborder="0" allowfullscreen></iframe>

transform лучше отрисовывает треугольники (особенно с острыми углами) - со сглаживанием. border-ные порой коряво выглядят.