How to use css to draw a geometric figure?

Good evening dear experts. How to use css to implement such a figure?
c28cec30d05c47ea9100b0392a610ca0.png
Thank you very much!
July 2nd 19 at 18:20
3 answers
July 2nd 19 at 18:22
Solution
Something like that) Without SVG and to any background)
https://jsfiddle.net/webirus/qm7sxj2x/1/
very original! :D thank you very much for your help and for mood! - Carter commented on July 2nd 19 at 18:25
July 2nd 19 at 18:24
Solution
https://jsfiddle.net/814646ey/

Color border-right replace with the background color
The height of border-top and border-bottom to half of the height of Your unit
And with wide border-right play so he kicked on as much as You need (if you set the same number as in a border-top/border-bottom, get a straight angle)

UPD.: Jaroslav said it right, but you can do without svg, even if you need transparency
https://jsfiddle.net/814646ey/2/
Thank you very much for the help and clarification! - Carter commented on July 2nd 19 at 18:27
: see the second link, it is a right triangle will be transparent. My bad in the first embodiment - Carter commented on July 2nd 19 at 18:30
: Yes, okay, I had to capture the essence of the construction of such figures. Still, thank you for your work and help! - greg.Stark97 commented on July 2nd 19 at 18:33
July 2nd 19 at 18:26
Solution
That suggested Sn0wSky it rules if not to take into account the background. If the background is colored it is better to use rendering in SVG.

https://jsfiddle.net/sx30u1m3/2/
Yes, we need it given the background, but forgot to specify it in the question... thank you very much for the help! - Carter commented on July 2nd 19 at 18:29
There is no SVG is drawn rules) - Carter commented on July 2nd 19 at 18:32
: Yes, something did not occur to you, it is easier) : I have corrected the link. Removed extraneous. - greg.Stark97 commented on July 2nd 19 at 18:35
: okay the main thing - the essence of realization of this figure. Thank you again for the help! - Carter commented on July 2nd 19 at 18:38

Find more questions by tags CSS