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