How to mark up such a figure?

Hi all, can't impose such a block, the design is such that there is a numbered list that goes into a dark translucent substrate. You can certainly make svg coy, but when we narrow the screen the text on the background of this svg will go, maybe there are options to mark up this code?
5e96f38357a66055668254.png
April 19th 20 at 12:08
3 answers
April 19th 20 at 12:10
Solution
April 19th 20 at 12:12
Solution
You can play with box-shadow, clip-paths, gradients, text-shadow, the pseudo-elements, png images and so on, but nothing will cope better with this task as SVG. You need to understand that CSS is not all-powerful tool, and if it is done a lot of good elements/animations/tricks/stuff, this does not mean that he is unique in every way. Draw a figure to SVG, and add this square to the side and insert the finished design as SVG, for example via the pseudo-element or inserting the span as an icon, for example. Because it was less of a spike solution to this problem, although spike to call him wrong. Most of all — it is the right decision. IMHO.
April 19th 20 at 12:14
Rather, text-shadow or box-shadow would solve this problem...
To make a shadow , slipping it to the bottom as the picture, write the block overflow: hidden that would not be the shade from the bottom, and the shadow to guide in the right direction

Find more questions by tags HTMLCSS