Css几乎响应掩模

我想在css中创建一个元素，如下所示： 我希望宽度是100%，但我希望三角形保持宽度（比如30px），即使在小屏幕上也保持居中

因此，我尝试在css渐变上使用多边形剪辑路径，但为了保持三角形居中，我必须将值放在%中，但正如您猜测的那样，三角形没有保持其大小为30px

有人有主意吗？可能会创建两个面具，一个是矩形，另一个是三角形，但我觉得不是很“干净”

---

thx；）

不久前我也要求过类似的东西（）

顺便说一句，欢迎来到StackOverflow（下次尽量表现出一些努力来避免落选）：

---

非常感谢，但事实上这并不是我想要做的，因为在你的例子中，after&before元素是不透明的，网站的背景是一个图像

但多亏了你的回答，我找到了完全适合我的问题的东西，我把我的形状分成三部分：

---

thx:）

哼哼。。。在我的例子中，前后伪元素可以是你想要的透明，你也可以设置你喜欢的图像…我不明白如何。。。如果在透明中设置before&after，它将显示div.foo的背景，不是吗？下面是我想要的结果：[link]我不知道如何设置您的解决方案以获得此结果，但我真诚地希望了解如何设置。谢谢

div.foo {
    font-size: 30px;
    position: relative;
    height: 1.5em;
    background: linear-gradient(to right, #99f8fd 0%,#e3ccf7 100%);
}

div.foo:before,
div.foo:after {
    content: "";
    display: block;
    width: calc(50% - .5em);
    position: absolute;
    top: 0;
    bottom: .5em;
    background-color: rgba(255, 255, 255, .8);
}

div.foo:before {
    left: 0;
}

div.foo:after {
    right: 0;
}

div.foo > div {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -.5em;
    border: .5em solid rgba(255, 255, 255, .8);
    border-bottom-color: transparent;
}

#foo{
    margin:40px 0 0;
    font-size: 50px;
}
#beforeMiddle, #afterMiddle{
    position: absolute;
    width: calc(50% - .8em);
    height: 10px;
}
#beforeMiddle{
    left: 0;
    background: linear-gradient(to right, #b7f5fa 0%,#cae2f8 100%);
}
#middle {
    width: 1.6em;
    left: 50%;
    margin: 0 0 0 -.8em;
    height: 10px;
    background: #cae2f8;
    position: absolute;
}
#middle:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 0;
    height: 0;
    border-left: .8em solid transparent;
    border-right: .8em solid transparent;
    border-bottom: 30px solid #cae2f8;
}
#afterMiddle{
    right: 0;
    background: linear-gradient(to right, #cae2f8 0%,#decff6 100%);
}