设置倾斜
的边距

作者: 哇塞
发布时间: 2025-02-02 02:49:23 (25天前)
转自：

3 条回复

0#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 实际上，大小会根据宽度而变化，因此可以根据宽度更新边距，以供您使用 <a href="https://www.w3.org/TR/css-values/#vw" rel="nofollow noreferrer"> 单元 <code> vw </code> </A> 。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .banner{ transform: skewY(-5deg); transform-origin: top right; outline: solid 1px black; margin-bottom: 9vw; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <section class="banner"> <h1>Hello World!</h1> <h2>Subtitle</h2> </section> <div class="content"> <p>CONTENT</p> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你也可以扭曲 <code> .content </code> 使用相同的转换，然后取消内容中的内容： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .banner { transform: skewY(-5deg); transform-origin: right; outline: solid 1px black; } .content { transform: skewY(-5deg); transform-origin: right; } .content p { transform: skewY(5deg); transform-origin: left; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <section class="banner"> <h1>Hello World!</h1> <h2>Subtitle</h2> </section> <div class="content"> <p>CONTENT</p> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论

设置倾斜的边距

设置倾斜
的边距