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

來源

2013-06-23 Marko S

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

此類似圖片。

來源

2014-02-15 15:26:45 pic0

用CSS3創建這個形狀？

回答

相關問題