html – 一个Div的偏僻边界

发布时间：2020-12-14 21:43:51 所属栏目：资源来源：网络整理

导读：我试图扭曲一个div，类似于： Slant the top of a div using css without skewing text 或者： http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/ 这是我想要做的一个形象：基本上，我需要在所有四方面以奇怪的方式倾斜边界。我可以用背景

我试图扭曲一个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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!