どうすればそのような図を作成できますか[クローズ]
CSSを使ってそのような図を作りたいですか?サーフィンをして長方形や楕円形を見つけましたが、これには会っていません。
画像:
回答
2 TemaniAfif
スキュー変換はそれを行うことができます:
.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
私はこのハックを思いついた: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>