带有斜角的横幅[重复]

Question

此问题已经在这里有了答案：

How do CSS triangles work?（19个回答）

关闭4年前。

我正在尝试创建结尾为三角形的横幅。

.wrapper {
  padding: 50px;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 20px solid gray;
  border-bottom: 20px solid gray;
  border-right: none;
}

<div class="wrapper">TEXT HERE</div>

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS81TGRveC5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

我正在尝试创建结尾为三角形的横幅。 .wrapper {padding：50px; font-size：0px;行高：0％;宽度：0px；顶部边框：20px纯灰色； border -...

Answer 1

只是在尝试时帮助您解决了这个问题，但并未按预期工作。所以基本思想是，我们可以使用CSS伪元素来创建效果。

Answer 2

请尝试使用此功能

Answer 3

这里是小提琴。 https://jsfiddle.net/nileshmahaja/s5egaebr/