我正在尝试创建一个只倾斜在顶端的div,并且不会使用CSS来扭曲其中的文本.
我希望它只是CSS的原因是因为它是一个响应式设计,需要响应百分比,因为其余的div随设备宽度的变化而变化.
我希望它只是CSS的原因是因为它是一个响应式设计,需要响应百分比,因为其余的div随设备宽度的变化而变化.
我想要完成的照片在这里:
到目前为止,我创造了一个偏斜的div并将其定位在另一个div中,然后使用负边距将其向上拉.这样做有两个问题,我已经做到了.第一个问题是,在最小的屏幕缩小(使您的浏览器宽度真的很小),偏斜的div变得比包含的div小,看起来很奇怪.此外,这个div覆盖了我之后添加的任何文本.
标记:
<aside> <div id="skew"></div><!-- #skew --> <h3 id="refer">Refer Your Friends</h3> </aside>
CSS:
#skew { background:#00328b; width:103%; height:66px; border-radius:8px; margin-top:-47px; margin-left:-1.2%; -webkit-transform: skewY(-5.5deg); -moz-transform: skewY(-5.5deg); -ms-transform: skewY(-5.5deg); -o-transform: skewY(-5.5deg); transform: skewY(-5.5deg); } .main aside { color: white; padding: 20px 10px; margin-top:120px; border-radius:8px; background: rgb(0,51,141); /* Old browsers */ }
我已经尝试使用父母的倾斜,但这会偏离其中的所有子元素.如果这是一个固定的布局,我会用绝对的定位来帮助我,但由于它是响应和灵活的,我不知道采取什么其他方法.
我也希望它在CSS中,因为我有其他效果添加到div,例如使用Box-shadow的外部辉光和背景渐变.
我也不能改变设计.
任何关于如何实现这一点的输入将是非常好的!
解决方法
一方面倾斜框,其内容另一方面:
<aside class="skew-neg"> <div class="skew-pos"> <p>Hello World.</p> <p>@jonathansampson.</p> <p>This Box is skewed.</p> <p>In supported browsers.</p> </div> </aside>
/* Skew the container one way */ .skew-neg { -webkit-transform: skewY(-5deg); -moz-transform: skewY(-5deg); -ms-transform: skewY(-5deg); -o-transform: skewY(-5deg); transform: skewY(-5deg); } /* And the child another way */ .skew-pos { -webkit-transform: skewY(5deg); -moz-transform: skewY(5deg); -ms-transform: skewY(5deg); -o-transform: skewY(5deg); transform: skewY(5deg); }
其结果类似于以下内容:
原文地址:https://www.jb51.cc/html5/168687.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。