我需要将一些文本和图像分成两半显示,如上图所示。尝试使用 clip-path ,但文本内容未换行并且也存在对齐问题。
我的代码:
.clipped-text{
width: 250px; height: 250px;
background: #1e90ff;
clip-path: polygon(0 100%, 100% 100%, 0 0);
text-align: justify;
position: absolute;
}
.clipped-image{
width: 250px; height: 250px;
background: #1e90ff;
clip-path: polygon(100% 100%, 100% 0, 0 0);
text-align: justify;
position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
<div>
<img class="clipped-image" src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"/>
<p class="clipped-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a …
Run Code Online (Sandbox Code Playgroud)