本文介绍了与css的波浪形状的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用CSS重新创建此图片:
I'm trying to recreate this image with CSS:
我不需要它重复。这是我开始的,但它只是一条直线:
I would not need it to repeat. This is what I started but it just has a straight line:
#wave {
position: absolute;
height: 70px;
width: 600px;
background: #e0efe3;
}
<div id="wave"><div/>
推荐答案
我不确定它是你的形状,但它接近 - 你可以玩的值:
I'm not sure it's your shape but it's close - you can play with the values:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
这篇关于与css的波浪形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!