我想讓文本向左浮動，我想讓文本位于三角形下方。我怎樣才能做到這一點(diǎn)？.content { background-color: #fff; min-height: 320px; min-width: 320px; max-width: 600px; text-align: justify;}.content::before { float: left; display: block; content: ''; height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; border-bottom-color: transparent;}<div class="content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, </div>
2 回答
HUX布斯
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個贊
您必須shape-outside特別使用屬性polygon來解決問題：
.content {
background-color: #fff;
min-height: 320px;
min-width: 320px;
max-width: 600px;
text-align: justify;
}
.content::before {
float: left;
display: block;
content: '';
height: 0;
border: 150px solid #dcdcdc;
float: left;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
-webkit-shape-outside: polygon(100% 0%, 100% 0%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
}
<div class="content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi
atque cum eveniet, voluptas adipisci fugit esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda,
</div>
Smart貓小萌
TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個贊
您可以通過多種方式做到這一點(diǎn)。我認(rèn)為正確的方法之一是使用背景漸變。
.content {
background-color: #fff;
max-width: 600px;
text-align: justify;
background: linear-gradient(to bottom right, transparent 50%, white 50.25%), /* update direction and start/stop value to your needs */
linear-gradient(90deg, #dcdcdc, #dcdcdc) white;
background-size: 100% auto;
}
<div class="content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi
atque cum eveniet, voluptas adipisci fugit esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda,
</div>
注意：我刪除了您的一些 CSS 屬性（例如min_width或max-width），以便您可以看到此解決方案完全響應(yīng)。當(dāng)然，您可以將它們添加回來。
- 2 回答
- 0 關(guān)注
- 197 瀏覽
添加回答
舉報
0/150
提交
取消