How to make a similar block in pure css?

Question

css

Good day!

Tell me how to make a block on the left as in the picture in the registration form?

Answer 1

If the SVG scale is of interest then here: https://codepen.io/topicstarter/pen/mdmeQWJ

Answer 2

I propose the following option.
We make two parts: left and right.
in the right one, everything seems to be simple, and in the left one, we set the background gradient.
Inside which we will place some of its child elements - logo, text, circles. I would make all of them absolute, after setting the left part of the form - position: relative.
We create one more block - for the wavy color background - along the diagonal of the block ... we also make it an absolute, and set it to occupy the entire height and width of the parent. Its z-index will be less than in texts, logos and circles, but more than in the background of a wavy color. I would ask the designer for the wavy background itself, since there are no ideas yet on how to implement such waves =/.
In terms of responsiveness , I would compose the https:// prnt elements this way . sc/ 18hg5rm - remove spaces =)

Answer 3

Good.
In this case, the block can be laid out like this:

1. as a percentage, set the width of the left block (in the picture it is somewhere around 60% of the width of the entire block)
   
2. we make this background in the left block (including circles and waves) one picture and insert it as a background
   
3. set the left block to a common padding, for example 20px
   
4. all text elements and the logo are typed in the usual way in the block flow
   

Thanks to this approach, our grid will be adaptive. Positioning the elements with an absolute in this case is not at all appropriate, since the entire grid will break during compression and expansion.