英文:
How to margin text based on clip path edge?
问题
我正在尝试根据裁剪的路径 div 来设置文本的 margin-left 以创建交错的外观。目前，我有类似这样的内容：
#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>
然而，我想尝试更高效地实现这个效果。我希望每个文本不需要单独的 margin-left。我想象中的情况是，每个文本都是根据新裁剪路径的边缘而不是矩形的原始边缘进行左边距：
<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%; // 不使用确切的数字，但类似这样的东西
}
不确定是否有与 CSS 相关的方法可以实现这一点。
英文:
I'm trying to margin-left text based on a clipped path div to create a staggered look. Currently, I have something like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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%;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
However, I want to try to do this more efficiently. I want it so each text doesn't need a separate margin-left. I'm picturing something where each text is margin-lefting based on the new clipped path edge rather than the original edge of the rectangle:
Then the code could look something like this:
<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
}
Unsure if there's something out there, assuming CSS related, that will let me achieve this.
答案1
得分: 1
这是 shape-outside 的工作。
#parent {
background-color: red;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#parent:before {
content: "";
float: left; /* 需要与 shape-outside 一起使用的浮动 */
width: 10%; /* 与父元素多边形的第一个值相同 */
height: 100%;
shape-outside: polygon(0 0, 100% 0, 0% 100%); /* 三角形形状 */
shape-margin: 10px; /* 这将控制间隙 */
}
/* 需要使用高度: 100% 的额外包装器，如 grid 或 flex */
.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>
英文:
This is the job of shape-outside
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论