Question

我想在css中创建一个元素，如下所示：http://i.stack.imgur.com/oZ5DL.png 我希望宽度是100％，但我希望三角形保持宽度（让我们说是30px）并保持在一个小屏幕上居中......

所以我尝试在css渐变上使用多边形剪辑路径，但为了保持三角形居中，我必须将值放在％中，但是你猜三角形并没有保持30px的大小... < / p>

有人有想法吗？可能会创建2个面具，一个是矩形，另一个是三角形图像，但它看起来并不是很干净。＃34;清洁＆＃34;给我......

thx;）

Answer 1

我前段时间要求类似的东西（Cut the background to expose the layer below）

顺便说一下，欢迎来到StackOverflow （下次尝试展示一些努力以避免downvotes）：

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;
}

Answer 2

非常感谢，但事实上它并不完全是我想要做的事情，因为在你的例子之后＆amp;在元素之前不是透明的，网站的背景将是一个图像。

但是由于你的回答，我发现了一些非常适合我的问题的东西，我把我的形状分成三部分： http://jsfiddle.net/viv54/g6r3bo51/

#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%);
}

thx：）

Css几乎响应面具

2 个答案: