Làm cách nào để tạo một hình như vậy [đóng]

Question

Tôi muốn tạo một hình như vậy bằng cách sử dụng CSS? Tôi lướt và tìm hình chữ nhật, hình bầu dục, nhưng chưa gặp cái này.

Hình ảnh:

Answer 1

biến đổi xiên có thể làm điều đó:

.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

Tôi nghĩ ra cách hack này: Sử dụng clip-path:playgon()tài sản.

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