[英]how to make css background with round shapes
I wanted to make a format divided into two parts with the shape of curves, only the background visual, with different colors and without affecting the position of any element.我想将格式分为曲线形状的两个部分,只有背景视觉,具有不同的颜色并且不影响任何元素的位置。
I wanted to do something like this, I remember having seen something similar using linear or radial gradient but I can't find it, it's just for the background without applying any kind of division or border我想做这样的事情,我记得曾经看到过类似的使用线性或径向渐变的东西,但我找不到它,它只是用于背景,没有应用任何类型的分割或边框
I think you can make something like wave background but just rotate it.我认为你可以制作类似波浪背景的东西,但只是旋转它。
<section>
<!-- content here -->
<div class="curve"></div>
</section>
section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-height: 400px;
padding-top: 100px;
background: #3c31dd;
}
.curve {
position: absolute;
height: 250px;
width: 100%;
bottom: 0;
text-align: center;
}
.curve::before {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 55%;
height: 100%;
transform: translate(85%, 60%);
background-color: hsl(216, 21%, 16%);
}
.curve::after {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 55%;
height: 100%;
background-color: #3c31dd;
transform: translate(-4%, 40%);
z-index: -1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.