どうすればそのような図を作成できますか[クローズ]

Dec 25 2020

CSSを使ってそのような図を作りたいですか?サーフィンをして長方形や楕円形を見つけましたが、これには会っていません。

画像:

回答

2 TemaniAfif Dec 25 2020 at 19:37

スキュー変換はそれを行うことができます:

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

ImranRafiqRather Dec 25 2020 at 19:42

私はこのハックを思いついた: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>