Rounded corners with border-radius only affecting one side

Question

I'm trying to recreate this:

I am using SVG and Polygon, is there any way more easy to do this and fix the border-radius?

 <div class="showCaseVideo" style="background: none;"> <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="border-top-left-radius: 300px 70px; border-bottom-left-radius: 300px 70px; border-radius: 35px;"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#076FAD;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#28AADD;stop-opacity:1"></stop> </linearGradient> </defs> <polygon points="0,10 100,0 100,100 0,90" style="/*! display: none; *//*! color: white; *//*! stroke: white; */fill: url(#grad1);/*! display: M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z; */" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z"> </polygon> </svg> </div> 

Answer 1

I'd use a pseudo element with a 3d transform.

 .slanted { position: relative; perspective: 500px; width: 180px; height: 120px; z-index: 1; display: flex; justify-content: center; align-items: center; color: white; font-size: 2.4; font-weight: bold; font-family: sans-serif; } .slanted::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: cornflowerblue; border-radius: 10px; transform: rotateY(-20deg); z-index: -1; } 

 <div class="slanted"> Slanted </div> 

Answer 2

What happens is you round the corners of the svg element not the corners of the polygon. In the next example I've recalculated your polygon to a path with rounded corners by adding quadratic Béziers for the corners. I hope it helps.

 svg{width:90vh} 

 <div class="showCaseVideo" style="background: none;"> <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" > <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#076FAD;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#28AADD;stop-opacity:1"></stop> </linearGradient> </defs> <!--<polygon points="0,10 100,0 100,100 0,90" style="fill: url(#grad1);"> </polygon>--> <path style="fill: url(#grad1);" d="M6.123233995736766e-16,20 Q0,10 9.950371902099892,9.00496280979001L90.04962809790011,0.9950371902099887 Q100,0 100,10L100,90 Q100,100 90.04962809790011,99.00496280979002L9.950371902099892,90.99503719020998 Q0,90 6.123233995736766e-16,80Z" /> </svg> </div> 

Another option would be using an HTML element with rounded corners and rotate it using perspective , transform-style: preserve-3d; and transform: rotateY() .

In this second case the text would be transformed as well.