ARTICLE AD BOX
How can I implement this Union shape given in a Figma design. In Dev Mode of Figma this shape with curved arrow only comes as SVG and figma does not give a clip-path css rule for the same. Wanted to know how can I build this with plain HTML & CSS ?
I tried adding this SVG image as a background to a div but clips of the image even after I do background-image: contain
Wanted to know if there's a better way to do this ?
Here's the SVG Code for the shape -
<svg xmlns="http://www.w3.org/2000/svg" width="857" height="139" viewBox="0 0 857 139" fill="none"> <path d="M26.0723 0.5H851.733C854.219 0.500198 856.233 2.51484 856.233 5V134L856.228 134.231C856.107 136.609 854.141 138.5 851.733 138.5H26.0723C23.587 138.5 21.5723 136.485 21.5723 134V82.4072C21.5722 80.2536 20.3146 78.2986 18.3555 77.4043L3.13184 70.4551C-0.376487 68.8537 -0.377152 63.8694 3.13086 62.2676L18.3564 55.3164C20.3152 54.422 21.5723 52.4668 21.5723 50.3135V5C21.5723 2.51472 23.587 0.5 26.0723 0.5Z" fill="#F6F6F6" fill-opacity="0.06" stroke="url(#paint0_linear_932_90)"/> <defs> <linearGradient id="paint0_linear_932_90" x1="-44.2394" y1="-4.87403" x2="794.649" y2="353.392" gradientUnits="userSpaceOnUse"> <stop stop-color="white" stop-opacity="0.14"/> <stop offset="1" stop-color="#373737" stop-opacity="0.61"/> </linearGradient> </defs> </svg>