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:

Trapezoid shape with rounded corner and border

Currently have:

How it's looking at the moment

.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;
}

user_8620333 · Answer

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;
}

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;
}

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

1 Answers