Hello! Please tell me how to make such a block. I can not understand how to implement it. enter image description here

  • background picture for example - Grundy

1 answer 1

Use canvas or svg .

Setting shapes with the layout will not work here, because then it will be difficult to make normal borders for the entire figure as a whole (in your example there are borders) + if responsivness is required, there will also be unnecessary difficulties.

Note that there are fundamental points that distinguish between svg and canvas. You can read about them, for example, here.

In the example below, I drew the shape you need using canvas. Hopefully arrange the text yourself.

var canvas = document.getElementById('figure'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.strokeStyle = '#ff0000'; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(200,0); ctx.lineTo(200,100); ctx.lineTo(300,200); ctx.lineTo(650,200); ctx.lineTo(700,270); ctx.lineTo(650,300); ctx.lineTo(320,300); ctx.lineTo(200,340); ctx.lineTo(0,340); ctx.fill(); ctx.stroke(); } 
 <canvas id="figure" width="800" height="700"></canvas>