小编Yas*_*ata的帖子

将文本内容包裹在剪辑路径多边形(三角形)形状内,并将图像剪辑在另一半

我试图实现这样的目标 在此处输入图片说明

我需要将一些文本和图像分成两半显示,如上图所示。尝试使用 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)

html css image word-wrap clip-path

6
推荐指数
1
解决办法
164
查看次数

标签 统计

clip-path ×1

css ×1

html ×1

image ×1

word-wrap ×1