如何使用 CSS3 创建这些形状
我尝试结合三角形和矩形的第一个形状：
.triangle {
width: 0;
height: 0;
border-bottom: 100px solid #000;
border-right: 100px solid transparent;
transform: rotate(-28deg);
-ms-transform: rotate(-28deg);
-webkit-transform: rotate(-135deg);
position:absolute;
top:30px;
left:60px;
}
.rectangle{
width:100px;
height:140px;
background:#000;
}
<div class="rectangle">
<div class="triangle"></div>
</div>
<html>
<head>
<title></title>
<style>
#rectangle{
position: absolute;
width: 100px;
height: 140px;
background: black;
top:40px;
}
#rectangle:after{
content: "";
position: absolute;
width: 0;
height: 0;
left: 75%;
top: 3%;
border-left: 50px solid transparent;
border-bottom: 132px solid black;
transform: rotate(-21deg);
}
#trapezoid{
position:absolute;
top: 40%;
border-bottom: 140px solid black;
border-right: 65px solid transparent;
height: 0;
width: 200px;
}
#trapezoid:after{
content: "";
position: absolute;
border-bottom: 50px solid black;
border-right: 25px solid transparent;
height: 0;
width: 80px;
top: -50px;
left: 95px;
}
#trapezoid:before{
content: "";
position: absolute;
border-bottom: 67px solid black;
border-left: 45px solid transparent;
top: -83px;
left: 112px;
transform: rotate(-124deg);
}
</style>
</head>
<body>
<div id="rectangle"></div>
<div id="trapezoid"></div>
</body>
</html>
这与您的图片相似。