只用html和css怎么做出这个效果？
突然接到这个要求，只用HTML和css做这个样式，希望给下指点，真想不出这东西怎么弄
<!--黑背景-->
<div style="background:black;height:100vh;width:100%;">
<!--红色圆-->
<div style="background:red;width:300px;height:300px;border-radius:150px;overflow:hidden;">
<!--白色圆-->
<div style="background:white;width:300px;height:300px;border-radius:150px;margin-top:200px;">
</div>
</div>
<!--白色柄-->
<div style="width:30px;height:200px;background:white;margin-left:135px;margin-top:-10px;"></div>
</div>
就是圆里边套个圆，这个红色的大圆 overflow：hidden就是溢出隐藏，然后里边的白圆用定位或者直接margin-top向下位移就行了，超出的时候会自动隐藏的，下面那根棒子就是个长方形盒子，拼上去就行了，如果感觉拼接不完美，把下面的长方形margin-top:给个负数向上移一下就行。
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="email=no" name="format-detection">
<meta content="telephone=no" name="format-detection">
<meta name="msapplication-tap-highlight" content="no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<link rel="shortcut icon" href="https://www.tyfo.com/market/content/home_image/favicon.ico" type="image/x-icon"/>
<title></title>
<style>
.rui-radius50{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: relative;
overflow: hidden;
}
.rui-radius25{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50px;
left: 0;
}
.rui-line25{
width: 10px;
height: 100px;
background-color: #fff;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body style="background-color: #000;">
<div style="position: relative;width: 100px;">
<div class="rui-radius50">
<div class="rui-radius25"></div>
</div>
<div class="rui-line25"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width: 200px;
height: 300px;
background-color: #000;
flex-flow: row;
display: flex;
align-items: center;
flex-direction: column;
}
.yuan{
width: 180px;
height: 200px;
background-color: red;
border-radius: 50%;
overflow: hidden;
position: relative;
margin-top: 10px;
}
.white{
position: absolute;
bottom: 0;
background-color: #FFFFFF;
width: 180px;
height: 100px;
border-radius: 80%;
}
.cuboid{
width: 40px;
height: 100px;
background-color: #FFFFFF;
position: relative;
top: -10px;
}
</style>
</head>
<body>
<div class="box">
<div class="yuan">
<div class="white"></div>
</div>
<div class="cuboid">
</div>
</div>
<script>
</script>
</body>
</html>
小伙子，我看你骨骼精奇，要不要跟我学前端呀
<!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>
</head>
<style>
</style>
<body>
<div
style="background-color: black;width: 400px;height: 550px;display: flex;flex-direction: column;align-items: center;">
<div
style="background-color: red;border-radius: 50%;width: 375px;height: 375px;margin-top: 10px;overflow: hidden;position: relative;margin-bottom: -10px;">
<div style="background-color: white;border-radius: 50%; width: 375px;height: 375px;position: absolute;top:50%;">
</div>
</div>
<div style="flex:1;width: 50px;background-color: white;z-index: 1;"></div>
</div>
</body>
<script>
</script>
</html>
自己再调调
<!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>
.racket{
background: black;
padding: 10px;
position: fixed;
}
.paddles{
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
position: relative;
z-index: 1;
overflow: hidden;
}
.pattern{
width: 180px;
height: 180px;
border-radius: 50%;
background: white;
position: relative;
margin: auto;
top: 100px;
}
.club{
width: 20px;
height: 140px;
background: white;
margin: -10px auto 0 auto;
}
</style>
</head>
<body>
<div class="racket">
<div class="paddles">
<div class="pattern"></div>
</div>
<div class="club">
</div>
</div>
</body>
</html>
写起来还挺有意思的，宽高自己根据设计图慢慢调
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="//s02.mifile.cn/assets/css/home.edbd5755.css" rel="preload" as="style">
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.box {
width: 400px;
height: 600px;
background: black;
position: relative;
z-index: 5;
}
.redCircle {
width: 360px;
height: 360px;
border-radius: 360px;
background: red;
position: relative;
z-index: 6;
margin: 0 auto;
overflow: hidden;
margin-top: 50px;
}
.whiteCircle {
width: 300px;
height: 300px;
border-radius: 360px;
background:white;
position: relative;
z-index: 7;
margin: 0 auto;
margin-top: 170px;
}
.whiteSquare{
width: 40px;
height: 262px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20px;
z-index: 6;
background: white;
}
</style>
</head>
<body>
<div class="box">
<div class="redCircle">
<div class="whiteCircle"></div>
</div>
<div class="whiteSquare"></div>
</div>
</body>
<script type="text/javascript">
</script>
</html>