html – 一个Div的偏僻边界

发布时间:2019-11-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 一个Div的偏僻边界脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图扭曲一个div,类似于:
Slant the top of a div using css without skewing text
或者: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

这是我想要做的一个形象:

基本上,我需要在所有四方面以奇怪的方式倾斜边界。我可以用背景图像来做到这一点,但是我更喜欢某些方法在CSS中执行,所以div可以在宽度和高度上做出反应。我想找到一个适用于旧版浏览器的解决方案,但我明白我不能拥有一切!

在四面线上倾斜边界的最佳方法是什么? (注意:绿色框底部的边框在中间倾斜,在外面倾斜,我不需要边框做这个,只有一个方向倾斜是好的。)

解决方法

我能够做出非常相似的东西。它可以在所有现代浏览器中运行。

Full Screen Demo —- jsFiddle demo

HTML – 很简单

<div>
    <p>text..</p>
</div>

<div>
    <p>text..</p>
</div>

<div>
    <p>text..</p>
</div>

CSS

div:nth-child(1) {
    background: rgb(122,206,122);
    height: 140px;
    transform: skew(-10deg) rotate(2deg);
    -webkit-transform: skew(-10deg) rotate(2deg);
    -moz-transform: skew(-10deg) rotate(2deg);
}

div:nth-child(1) p {
    transform: skew(10deg) rotate(-2deg);
    -webkit-transform: skew(10deg) rotate(-2deg);
    -moz-transform: skew(10deg) rotate(-2deg);
    padding: 3% 2%;
}

div:nth-child(2) {
    border-bottom: 180px solid rgb(233,233,65);
    border-left: 8px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    margin-top: 60px;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
}

div:nth-child(2) p {
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    padding: 3.5% 3%;
}

div:nth-child(3) {
    border-top: 140px solid rgb(253,74,74);
    border-left: 23px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    margin-top: 20px;
    transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
}

div:nth-child(3) p {
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    position: absolute;
    top: -140px;
    padding: 3% 3%;
}

div:nth-child(3):before {
    content: '';
    width: 124%;
    height: 80px;
    background: white;
    position: absolute;
    left: -20%;
    bottom: 120px;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}

总结

以上是脚本之家为你收集整理的html – 一个Div的偏僻边界全部内容,希望文章能够帮你解决html – 一个Div的偏僻边界所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: