Bagaimana cara membuat sosok seperti itu [tertutup]

Question

Saya ingin membuat sosok seperti itu menggunakan CSS? Saya berselancar dan menemukan persegi panjang, oval, tetapi belum pernah bertemu yang ini.

Gambar:

Answer 1

transformasi miring dapat melakukannya:

.box {
  height: 400px;
  width: 400px;
  position: relative;
  border-left: 5px solid blue;
  overflow: hidden;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  box-sizing: border-box;
  border-top: 5px solid blue;
  border-right: 5px solid blue;
  transform-origin: bottom;
  transform: skewX(8deg);
}

.box::after {
  transform: scaleY(-1) skewX(8deg);
}

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

Answer 2

Saya datang dengan peretasan ini: Menggunakan clip-path:playgon()properti.

.container{
  position:absolute;
  background:red;
  width:520px;
  height:220px;
  clip-path: polygon(0 0, 90% 0,100% 50%, 90% 100%, 0 100%);
  background:blue;
  position:relative;
}
.child{
  width:500px;
  height:200px;
  clip-path: polygon(0 0, 90% 0,100% 50%, 90% 100%, 0 100%);
  background:#fff;
  position:absolute;
  top:10px;
  left:10px;
  background-image:url(https://picsum.photos/200);
}

<div class="container">
    <div class="child"></div>
  </div>