@Narbek

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

5f0b16a609d8d877962458.png

Нужно именно сверстать как 2 блока, а не вставить как background.
  • Вопрос задан
  • 437 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега Вёрстка
Нежно люблю верстку
Обычный градиент под углом на фоне.
Одна строчка кода.
background: linear-gradient(-45deg, red 50%, black 50%);

У меня переход цвета по середине. Сдвиньте куда нужно и если нужно.
Можно поставить на фон только одному блоку, второй оставить однотонным (а еще лучше прозрачным).
Можно задать градиент псевдоэлементу одного из блоков и спозиционировать куда нужно.
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега Вёрстка
I will live forever in the flame of your eyes.
Нужно именно сверстать как 2 блока, а не вставить как background.


Тогда можно так:

Ответ написан
Пригласить эксперта
Ответы на вопрос 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы