How to make a rounded trapezoid shape with a white stroke?

Question

I'm trying to make a trapezoid with a white stroke around it, but can't seem to figure out how to do it properly.

Goal:

Currently have:

 .trapezoid { height: 0; width: 65px; border-bottom: 40px solid #31cae8; border-left: 10px solid transparent; border-radius: 5px; position: absolute; z-index: 100; border-right: 10px solid transparent; text-align: center; color: white }.trapezoid2 { height: 0; width: 80px; left: 0; border-bottom: 50px solid white; border-left: 12px solid transparent; border-radius: 5px; border-right: 12px solid transparent; text-align: center; color: white }.flex { display: flex; align-items: center; justify-content: center; } body { background:pink; }

 <div class="flex"> <div class="trapezoid"></div> <div class="trapezoid2"></div> </div>

Answer 1

with some transformation you can do it:

 .box { width: 150px; height: 100px; margin: 15px; position: relative; }.box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: lightblue; border: 5px solid #fff; border-radius: 15px; transform: perspective(200px) rotateX(30deg); /* this will do the trick */ } /* the arrow shape */.box::after { content: ""; position: absolute; width: 50px; height: 50px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); left: 50%; top: 50%; transform: translate(-40%, -50%); } /**/ body { background: pink; }

 <div class="box"> </div>

Also like below with skew transformation:

 .box { width: 150px; height: 80px; margin: 15px; position: relative; }.box::before, .box::after{ content: ""; position: absolute; top: 0; bottom: 0; width:50%; background: lightblue; border: 5px solid #fff; transform-origin:bottom; }.box::before { border-radius:15px 0 0 15px; border-right:0; left:0; transform:skew(-10deg); }.box::after { border-radius:0 15px 15px 0; border-left:0; right:0; transform:skew(10deg); } body { background: pink; }

 <div class="box"> </div>