Look at the code first, copy and use it. The CSS style itself provides a lot of capabilities, but I still think that many front-end developers are not proficient in studying CSS. Here is a background style that allows you to easily deal with complex UI interface. (You will see the following effects)
If you are satisfied, please give Mo Chengchen a Fabulous
Here is the code fragment, a full html file, you can copy, for other styles you want to set, here provides an online website website link can be for you to do other reference, use the following chart
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
border-radius:48% 53% 51% 49% / 42% 56% 0% 56% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div2{
border-radius:48% 53% 51% 2% / 56% 55% 0% 43% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div3{
border-radius:100% 0% 51% 48% / 57% 0% 100% 43% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div4{
border-radius:32% 0% 100% 100% / 1% 100% 100% 100% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div5{
width: 600px;
height: 400px;
border-radius:41% 58% 0% 100% / 45% 100% 0% 61% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
div{
display: inline-block;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>
The above are the characteristics of the border-radius attribute. You can customize the test on the official website
. You can leave a message if you have any questions about css or you don't understand this method, and I will reply and help you solve it as soon as possible.