Question

我正在尝试在CSS3中构建一个V形横幅（不确定该对象是什么名称），但我在Chrome中遇到了别名问题。我尝试使用-webkit-backface-visibility: hidden属性，但我仍然在Chrome中遇到别名问题。

这是我的CSS：

.banner {
    height: 0px;
    width: 280px;
    border-left: 20px solid rgba(0, 0, 0, 0);
    border-right: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 40px solid black;
    border-top: 40px solid black;
    -webkit-backface-visibility: hidden;
    text-align: center;
    line-height: 0;
    color: white;
}

HTML：

<div class="banner">
    Hello World
</div>

我在这里为这个问题创造了一个小提琴： http://jsfiddle.net/4PWP5/2/

任何帮助解决这个问题都表示赞赏。

Answer 1

警告：这是龙咳，我的意思是SVG。

您应该能够混合，匹配和剪切此样本以满足您的特定需求。

Sample Fiddle

HTML：

<div id="container">
    <svg viewBox="0 0 10 10" preserveAspectRatio="none">
        <path d="M 0,0 L 10,0 9.5,5 10,10 0,10 0.5,5 z" fill="black"></path>
    </svg>
    <span>Hello World!</span>
</div>

CSS：

#container {
    width: 300px;
    height: 60px;
    position: relative;
}

#container > svg {
    width: 100%;
    height: 100%;
}

#container > span {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
}

CSS3：雪佛龙侧横幅有别名边缘

1 个答案: