css3 - 这个右下角折角用css怎么画出来?
黄舟
黄舟 2017-04-17 11:36:47
0
4
606

这种折角用css怎么画出来啊,右下角那个?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

reply all(4)
Peter_Zhu

This can be achieved through the pseudo-class border-color.

HTML

<p class="bg">
    <p class="paper"></p>
</p>

CSS

.bg{
    padding:10px;
    background: #262a67
}
.paper{
    background:#00b5e9;
    width:500px;
    height:500px;
    position: relative;
}

.paper:before{
    content:"";
    position: absolute;
    right:0;
    bottom:0;
    display: block;
    border: 50px solid;
    border-color:#0095be transparent transparent #0095be;
}

.paper:after{
    content:"";
    position: absolute;
    right:0;
    bottom:0;
    display: block;
    border: 50px solid;
    border-color:transparent #262a67 #262a67 transparent ;
}

If the background is not a solid color, you need to split the folding page into rectangular strips and folding triangles. This can also be achieved through pseudo-classes.
It is only provided for reference. The specific implementation needs to be modified as needed.

HTML

<p class="paper"></p>

CSS

.paper{
    width:500px;
    height:500px;
    position: relative;
    background:#00b5e9;
}

.paper:after{
    content:"";
    position: absolute;
    right:0;
    bottom:-100px;
    display: block;
    border: 50px solid;
    border-color:#0095be transparent transparent #0095be;
}

.paper:before{
    content:"";
    background:#00b5e9;
    width:400px;
    height:100px;
    position: absolute;
    bottom:-100px;
}
左手右手慢动作

You can use Baidu to search for CSS3 corners

大家讲道理

I implemented it by using three p's. A square p includes two triangle p's, and then it is positioned by position. . .

刘奇

hover.css http://ianlunn.github.io/Hover/ has this effect, the corner is folded using gradient color

Other ideas can be to use border-width to simulate a triangle and then position it there

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template