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

我有一个三角形：

当浏览器变小时，将按以下方式裁剪：

我想它的作物从左边和右边，所以文本仍然是可见的

标记：

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

---

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

还做了一些小的改进——将左边框和右边框的样式改为

开头

，这样可以让Firefox上的线条看起来更流畅

尝试演示，调整输出帧的大小，并查看形状和文本如何始终保持在中心

.triangle{
文本对齐：居中；
位置：相对位置；
}
.三角：以前{
宽度：0；
身高：0；
左边框：300px透明；
右边框：300px；
边框顶部：45px实心#6699ff；
内容：“；
显示：内联块；
位置：绝对位置；
左：50%；
左边距：-300px；
}
.季节{
位置：绝对位置；
宽度：100%；
文本对齐：居中；
颜色：白色；
利润率：10px0；
}

你好，世界

也许是这样

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