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

Question

我有这个三 Angular 形:

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

我希望它从左右两侧裁剪，这样文本仍然可见。

标记:

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

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

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