使用CSS向下指向五边形形状的文本

Question

我正在尝试创建一个向下的五边形形状，其中带有文本。有一些示例（How to make Background div inner curved using HTML, CSS?，Clippy-CSS clip-path maker），但这些并不是我想要的确切解决方案（请参见下图）。

任何帮助将不胜感激，谢谢。

我已解决问题：

我以前没有使用 :: after 伪元素。伪元素将内容插入元素的内容之后。以上输出是使用方框和向下的三角形得出的。

.card {
    margin: 15px;
    background: #ccc;
    position: relative;
}

.card:after {
    content: '';
    display: block;
    position: absolute;
    border-left: 350px solid transparent;
    border-right: 350px solid transparent;
    border-top: 40px solid #ccc;
    left: 1px;
}

 <div class="boss-card">
  <div class="row">
    <div class="col-md-12">
      <p>Lorem Ipsum</p>
     </div>
   </div>
</div>

Answer 1

这可以使用剪切路径来完成。

基本示例-

clip-path: polygon(50% 100%, 100% 50%, 75% 0, 25% 0, 0% 50%);

您可以查看更多信息here

Answer 2

您可以使用剪切路径：

[ts] Property 'value' does not exist on type 'HTMLElement'.

别忘了使用Webkit：

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

这是一个例子：

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

.box {
background-color: gray;
-webkit-clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0);
clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0);
height: 200px
}
h2 {
text-align: center;
}

您可以使用此网站：https://bennettfeely.com/clippy/来简化剪切路径。