Implementing uniform gradient across two divs in html css

I created two designs in Adobe XD.

I can achieve the first design in HTML with two divs or one div and its after etc. How do I achieve the second design in HTML and CSS?

I also want to add the border so I can't use clip-path either.