调整大小时裁剪CSS形状的两侧

Question

我有这个三角形：

当浏览器变小时，会以这种方式裁剪：

我希望从左右两侧裁剪，因此文本仍然可以查看。

标记：

echo '<div class="triangle"><p class="season">SEASON '.substr($patch_array[$x][0],0,1).'</p></div>';

CSS：

.season{
    font-size: 16px;
    text-align: center;
    top: -35px;
    left: -60px;
    position: relative;
    width: 113px;
    margin: 0px;
    padding: 0px;
    color: white;
}
.triangle{
    width: 0;
    height: 0;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    border-left: 300px solid transparent;
    border-right: 300px solid transparent;
    border-top: 45px solid #6699ff;
}

Answer 1

我们的想法是将容器设置为相对位置，然后使用伪元素绘制形状，并将形状和文本设置为绝对位置并始终保持居中。

同样做了一些小改进 - 将左右边框样式更改为outset，它可以让Firefox上的线条显得更加流畅。

尝试演示，调整输出框架的大小，看看形状和文字是如何保持在中心的。

JsFiddle Demo

＆＃13;

＆＃13;

.triangle {
    text-align: center;
    position: relative;
}
.triangle:before {
    width: 0;
    height: 0;
    border-left: 300px outset transparent;
    border-right: 300px outset transparent;
    border-top: 45px solid #6699ff;
    content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -300px;
}
.season {
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    margin: 10px 0;
}

＆＃13;

<div class="triangle">
    <p class="season">Hello World</p>
</div>

＆＃13;

＆＃13;

＆＃13;