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

[mepoohsta]

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

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

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

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

[Lemme]

<style>
div {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: tomato;
}
div::after{
  position: absolute;
  right: 0px;
  bottom: -10px;
  content: "";
 	width: 0;
	height: 0;
	border-right: 10px solid transparent;
	border-top: 10px solid tomato;
}
</style>
<div></div>

[george260493]

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



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>

[mikhail.golovkin]

День добрый!

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

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

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

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

[Nanto]

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