如何使用css创建一个三角形形状的div？

Question

我想要一个在左边有＃34;角形状的div＆＃34;。我怎样才能用CSS3创建它？我假设这需要2个div？我知道我可以制作一个矩形div并填充它，并有黄色文字。虽然我不知道我能做些什么来使左边的三角形状。可以用完成的div来完成吗？还是需要2？寻找最佳方法。

Answer 1

您可以使用linear-gradient来实现此目的。演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Link for reference

风格相应。

Answer 4

您可以使用clip-path，但它有not so good browser support。我在这里使用100vmax 100vmax来实现45度削波。演示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;