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

概述我有这个三角形： 当浏览器变小时,会以这种方式裁剪： 我希望从左右两侧裁剪,因此文本仍然可以查看. 标记： echo '<div class="triangle"><p class="season">SEASON '.substr($patch_array[$x][0],0,1).'</p></div>'; CSS： .season{ font-size: 16px; text-a 我有这个三角形：

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

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

标记：

echo '<div ><p >SEASON '.substr($patch_array[$x][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;}

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

还做了一些小的改进 – 改变了左右边框样式,这样就可以让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 >    <p >Hello World</p></div>

总结

以上是内存溢出为你收集整理的html – 调整大小时裁剪CSS形状的两侧全部内容，希望文章能够帮你解决html – 调整大小时裁剪CSS形状的两侧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。