Html 如何根据剪辑路径边缘设置文本边距

#parent {
  background-color: red;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#text1 {
  margin-left: 10%;
}

#text2 {
  margin-left: 7.5%;
}

#text3 {
  margin-left: 5%;
}

#text4 {
  margin-left: 2.5%;
}

<div id='parent'>
  <p id='text1'>Text 1</p>
  <p id='text2'>Text 2</p>
  <p id='text3'>Text 3</p>
  <p id='text4'>Text 4</p>
</div>

<div id='parent'>
  <p class='text'>Text 1</p>
  <p class='text'>Text 2</p>
  <p class='text'>Text 3</p>
  <p class='text'>Text 4</p>
</div>

#parent {
  background-color: red;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.text {
  margin-left: 2%; // Not using exact numbers, but something like this
}

#parent {
  background-color: red;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#parent:before {
  content: "";
  float: left; /* we need float with shape-outside */
  width: 10%; /* same value as the first value on the polygon of the parent */
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, 0% 100%); /* triangle shape */
  shape-margin: 10px; /* this will control the gap */
}

/* an extra wrapper with grid or flex is needed to use height: 100% */
.box {
  display: grid;
}

<div class="box">
  <div id='parent'>
    <p id='text1'>Text 1</p>
    <p id='text2'>Text 2</p>
    <p id='text3'>Text 3</p>
    <p id='text4'>Text 4</p>
  </div>
</div>

Html相关问答推荐

CURL邮箱中的图像不能调整其大小

R-markdown中的非顺序列表

标签数据的XPath？

如何在一张表中逃脱边境坍塌--崩溃？

如何在html和css中创建动态调整大小的表元素

让多对图像在各自的div中叠加

为什么在移动视图中，这个水平可滚动的表格会在表格的右侧显示额外的空间？

Django中的图像未从静态显示

单独处理Button：Focus的多行按钮

如何防止滑动滚动元素时touch 屏出现空白区域？

顶部有文字的图像的悬停效果

网格项未在同一行上对齐

如何在Go模板中传入途中创建的 map

如何使用多边形制作如图所示的背景

如何使用 Tailwind CSS 分隔导航栏中的元素？

如何修剪 flex： 1 内的垂直文本？

带标签 css 的 div 内的中心图标

显示填充正方形的图形的简单页面的 HTML 代码

增加第一个字母的大小不再正确居中文本

我正在创建一个 django 审查系统.我认为我的 HTML 是错误的