带有三角形底部形状的CSS标题

Question

我在CSS中创建这样的标题样式。有人能帮帮我吗？

Answer 1

完全可以使用以下css

.content::after{
    content: "";
    background: #fff;
    transform: skewY(10deg);
    width: 50%;
    height: 80px;
    position: absolute;
    left: 0;
    top: 75px;
}
.content::before{
    content: "";
    background: #fff;
    transform: skewY(-10deg);
    width: 50%;
    height: 80px;
    position: absolute;
    right: 0;
    top: 75px;
}

.content{
  width:100%;
  height:75px;
  background:#fff;
  overflow:hidden;
  padding:20px;
}

你应该在不同的屏幕尺寸上检查它，并调整后面和前面元素的高度 在这种情况下，内容类应该是您要添加三角形的元素