Question

如何使用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>

Answer 1

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

这与你的相似。

用CSS3创建这个形状？

1 个答案: