原理:左上利用border-radius:100% 0 0 0;
右上利用border-radius:0 0 100% 0;
右下利用border-radius:0 0 100% 0;
左下利用border-radius:0 0 0 100%;
在每个元素后添加hover设置鼠标滑入时的颜色;
再用利用flex布局实现拼接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#top-left {
width: 50px;
height: 50px;
background-color: antiquewhite;
border-radius: 100% 0 0 0;
}
#top-left:hover {
background-color: red;
}
#top-right {
width: 50px;
height: 50px;
background-color: darkmagenta;
border-radius: 0 100% 0 0;
}
#top-right:hover {
background-color: red;
}
#bottom-right {
width: 50px;
height: 50px;
background-color: brown;
border-radius: 0 0 100% 0;
}
#bottom-right:hover {
background-color: red;
}
#bottom-left {
width: 50px;
height: 50px;
background-color: aqua;
border-radius: 0 0 0 100%;
}
#bottom-left:hover {
background-color: red;
}
#top {
display: flex;
}
#bottom {
display: flex;
}
</style>
</head>
<body>
<div id="top">
<div id="top-left"></div>
<div id="top-right"></div>
</div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-right"></div>
</div>
</body>
</html>
运行结果:
鼠标移入后