Как сверстать вот такие два 4-х угольника?

Question

[Theory Theory]

Нужно именно сверстать как 2 блока, а не вставить как background.

Comments

[greymouse2]

вот например. jsfiddle.net/Symphony/s1qr1auy не мой пример.. просто делаете svg

Answer 1

[Ankhena]

Обычный градиент под углом на фоне.
Одна строчка кода.

background: linear-gradient(-45deg, red 50%, black 50%);

У меня переход цвета по середине. Сдвиньте куда нужно и если нужно.
Можно поставить на фон только одному блоку, второй оставить однотонным (а еще лучше прозрачным).
Можно задать градиент псевдоэлементу одного из блоков и спозиционировать куда нужно.

Answer 2

[Lynatik001]

https://editor.method.ac/ - за 30 сек такое сверстал

svg рулит мб

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->

 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect stroke="#000" transform="rotate(21 78.74279022216778,178.80790710449222) " id="svg_1" height="652.581347" width="336.530156" y="-147.482772" x="-89.522283" stroke-width="1.5" fill="#fff"/>
  <rect stroke="#fff" transform="rotate(21 475.7591552734371,275.76535034179705) " id="svg_3" height="652.581347" width="475.814017" y="-50.525341" x="237.852123" stroke-width="1.5" fill="#f4f413"/>
  <rect stroke="#fff" transform="rotate(21 78.74279022216778,178.80790710449222) " id="svg_4" height="652.581347" width="336.530156" y="-147.482772" x="-89.522283" stroke-width="1.5" fill="#000"/>
 </g>
</svg>

Comments

[Pavel-E-F]

Не сложноват ли svg?
Двумя path всё делается. Нет? )))

[Lynatik001]

Pavel-E-F, ну что знал, тем и ответил. Я ссылку на сайт скинул. где етот свг рисуется за 30 сек. первое что в голову пришло. если ето можно решить проще то валяйте.

Answer 3

[terentjew-alexey]

Еще вариант : https://css-tricks.com/the-shapes-of-css/#trapezoi...