html - 如何仅使用 css 创建一个三 Angular 形的 div？

Question

我想要一个“左边有 Angular 形”的 div。如何仅使用 CSS3 创建它？我假设这需要 2 个 div？我知道我可以制作一个矩形 div 并将其填充回去，并使用黄色文本。虽然我不知道我能做些什么来制作左边的三 Angular 形。可以只用done 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>