CSS中的形状实现可以运用各种技巧,在这里我们介绍一种实现两边半圆、中间矩形的方法。 .container{ position: relative; width: 400px; height: 200
CSS中的形状实现可以运用各种技巧,在这里我们介绍一种实现两边半圆、中间矩形的方法。
.container{ position: relative; width: 400px; height: 200px; margin: 50px auto; background-color: #eee; border-top-left-radius: 100px; border-bottom-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; overflow: hidden; } .container:before, .container:after{ content: " "; position: absolute; width: 60px; height: 200px; background-color: #fff; } .container:before{ left: -30px; border-radius: 30px 0 0 30px; } .container:after{ right: -30px; border-radius: 0 30px 30px 0; }
代码中,我们给容器设置了一个 position:relative,同时设置了高度、宽度和四个圆角。然后使用两个伪元素:before和:after分别生成两个白色的矩形,定位在容器左右两端,并给它们设置上下半圆的拐角。
通过这种方式,我们得到了两边拐角为半圆的矩形,并且把中间部分给遮挡住了。这样,就实现了两边半圆中间矩形的形状效果。
粉丝
0
关注
0
收藏
0