【纯CSS实现底部弧度的小技巧】_css弧度样式

底部弧度 

很多页面都有底部弧线的设计，用图片的话就要多加载一张图片，有些麻烦。实际只要利用css的after伪类就可以简单的实现弧线，废话不多说，直接上代码

html:

<div class="top"></div >

css:

.top {

    position: relative;

    width: 100%;

    height: 200px;

}

.top:after {

    width: 180%;

    height: 200px;

    position: absolute;

    left: -40%;

    top: 0;

    z-index: -1;

    content: '';

    border-radius: 0 0 50% 50%;

    background: rgb(71, 71, 245);

}

先将元素自身定位为relative，伪类设置content:‘’，并相对定位为absolute，再设置下left ,top 值，然后通过改变width和和left就可以调节弧度。宽度需大于100%，将left设为（100%-宽度）/ 2，然后宽度越接近100%，弧度越大，相当方便。

因为大部分的底部弧线都是用于背景的，实际应用的话外面只要套一个绝对定位的容器就可以了，简单实用。