How to make an unusual shape div in your CSS?

Good day!

Tell me please, how to give form to that block in your css. In fact it is necessary to change the form from the div.
Here is a picture:
5dfa40f0a5ad4734048619.png

Know that it is possible to solve this question the usual svg position:absolute, but interested more in the sophisticated decision by the changing angles at the div.
Block this block of pseudo-elements before and after is also not desirable, maybe you want to save the transparency at the edges.
To paint a gradient and add a shadow can)

Thanks in advance! All the world!
April 3rd 20 at 18:34
4 answers
April 3rd 20 at 18:36
Solution
5dfa49f47968c029793447.jpeg
The decision is good, but when you add shadows, transparency is lost at the edges. - patsy commented on April 3rd 20 at 18:39
@patsy, use filter: drop-shadow instead of box-shadow - holly.Miller commented on April 3rd 20 at 18:42
cool! thank you! - patsy commented on April 3rd 20 at 18:45
April 3rd 20 at 18:38
You can make clip-path, for any SVG figure:
Yes you can just svg'shku rendered and absolutely of her position, but interesting all the same, is it possible with pure css - patsy commented on April 3rd 20 at 18:41
@patsy, @holly.Miller gave the decision, isn't it?

you can just svg'shku draw and its brand position

clip-path does the block itself need a form that gives more flexibility and removes the problem of pozicionirovanija. - Whitney58 commented on April 3rd 20 at 18:44
@Whitney58, Yes, thank you! - patsy commented on April 3rd 20 at 18:47
April 3rd 20 at 18:40
.block {
 clip-path: polygon(0% 40%,100% 0%,100% 100%,0% 100%) margin-box;
 margin: 0;
}
try this..
Link to article - read more here it says
Cool property, but it cuts corners, respectively, border-radius is not working - patsy commented on April 3rd 20 at 18:43
April 3rd 20 at 18:42
Searched for but not found :( - patsy commented on April 3rd 20 at 18:45

Find more questions by tags CSSHTMLLayout