想要做一个类似以下的效果:
当左侧比例很小比如5%,那么文本内容正常来说会溢出。
但是由于我的嵌套层级是这样的:
<div className="outer">
<div className="inner">奈飞奈飞奈飞</div>
<div>5%</div>
</div>
outer{
clip-path:polygon(0 0, 100% 0, 91% 100%, 0 100%);
}
导致文本无法溢出,因为clip-path在裁剪outer这个容器的时候,顺便把文字内容也裁剪了 。
解决办法就是
.outer{
position:relative;
clip-path:xxxxx;
}
.inner{
position:absolute;
top:10px;
left:10px;
}