그런 그림을 어떻게 만듭니 까 [닫힌]

Question

CSS를 사용하여 그런 그림을 만들고 싶습니까? 나는 서핑을하고 직사각형, 타원형을 발견했지만 이것을 만나지 못했습니다.

영상:

Answer 1

왜곡 변환은 다음과 같이 할 수 있습니다.

.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

나는이 해킹을 생각 해냈다 : clip-path:playgon()속성 사용 .

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