如何用css創建一個帶有三角形形狀的div？

Question

我想要一個具有「左側形狀的角度」的div。我怎樣才能用CSS3創建這個？我假設這需要2個div？我知道我可以製作一個矩形div並填充它，並有黃色文本。雖然我不知道我能做些什麼來使左邊的三角形成形。它可以只完成div嗎？還是需要2？尋找最好的方式來做到這一點。

Answer 1

您可以使用linear-gradient來實現此目的。演示：

.text { 
 
    width: 400px; 
 
    background-image: linear-gradient(45deg, transparent 50px, black 50px); 
 
    padding-left: 100px; 
 
    color: yellow; 
 
}

<div class="text"> 
 
    <h1>Some Name Here</h1> 
 
</div>

Answer 2

爲什麼不嘗試這樣的事：

.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border: 50px solid black; 
 
    border-bottom-color: transparent; 
 
    border-left-color: transparent; 
 
    float: left; 
 
} 
 

 
.text { 
 
    width: 400px; 
 
    height: 100px; 
 
    background-color: black; 
 
    float: left; 
 
    color: yellow; 
 
}

<div class="triangle"></div> 
 
<div class="text"><h1>Some Name Here</h1></div>

更多這方面的信息，請參閱How do CSS triangles work?。

Answer 3

您可以使用僞元素::before或::after

.triangle { 
 
    padding: 10px; 
 
    position: relative; 
 
    background-color: #000; 
 
    color: yellow; 
 
    display: inline-block; 
 
    margin-left: 40px; 
 
} 
 

 
.triangle::after { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 19px solid #000; 
 
    height: 0; 
 
    width: 0; 
 
    left: -38px; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    border-left-color: transparent; 
 
    border-bottom-color: transparent; 
 
}

<div class="triangle"> 
 
    text-here 
 
</div>

Link for reference

樣式因此。

Answer 4

您可以使用clip-path但它有not so good browser support。我在這裏使用100vmax 100vmax來實現45度裁剪。演示：

.text { 
 
    width: 400px; 
 
    background-color: black; 
 
    -webkit-clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%); 
 
    clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%); 
 
    padding-left: 100px; 
 
    color: yellow; 
 
}

<div class="text"> 
 
    <h1>Some Name Here</h1> 
 
</div>