【发布时间】：2021-01-16 08:40:57
【问题描述】：
我一直在尝试使用 HTML/CSS 制作一个分段的圆圈，但是当屏幕分辨率降低或提高时，圆圈的两个部分（左侧和底部）不会停留在固定位置，但是另一个零件做。这是我现在的代码：
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #457CB0;
}
.circle {
background: #457CB0;
border: 50px solid rgba(255, 255, 255, .6);
border-radius: 50%;
box-shadow: 0.475em 0.475em 0.6em 0.6em rgba(15, 28, 63, 0.125);
height: 27em;
width: 27em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.cirlce2 {
border: 20px dashed rgba(255, 255, 255, .6);
border-radius: 70%;
height: 25em;
width: 25em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.myCircle2 {
border: 20px solid rgba(255, 255, 255, 0);
border-radius: 70%;
height: 7.2em;
width: 7.2em;
background-color: #457CB0;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.textCircle {
color: #ffffff;
position: absolute;
width: 155px;
height: 250px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-family: 'Montserrat', sans-serif;
letter-spacing: -1px;
}
.myCircle3 {
border-bottom: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 320px;
width: 320px;
border-radius: 250px 250px 250px 250px;
background-color: rgba(255, 255, 255, .3);
border-bottom: 0;
border: 100px solid rgba(255, 255, 255, 0);
}
.div {
position: absolute;
top: 60.25%;
left: 50%;
transform: translate(-50%, -50%);
height: 152px;
width: 320px;
border-radius: 0 0 150px 150px;
background-color: #457CB0;
}
.myCircle4 {
border: 7px solid #457CB0;
border-radius: 50%;
height: 21em;
width: 21em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.bottom-right-quarter-circle {
height: 145px;
width: 155px;
top: 51.9%;
left: 50.3%;
position: absolute;
border-radius: 0 0 250px 0;
background-color: rgba(255, 255, 255, .3);
}
.bottom-left {
height: 145px;
width: 155px;
top: 51.9%;
left: 37.5%;
position: absolute;
margin: auto;
display: block;
border-radius: 0 0 0 250px;
background-color: rgba(255, 255, 255, .3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circle</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="CircleType-master/dist/circletype.min.js"></script>
<link rel="stylesheet" href="circle.css">
</head>
<body class="bg">
<div class="circle"></div>
<div class="cirlce2"></div>
<div class="myCircle"></div>
<div class="myCircle2"></div>
<div class="myCircle3"></div>
<div class="myCircle4"></div>
<div class="div"></div>
<div class="bottom-right-quarter-circle"></div>
<div class="bottom-left"></div>
</body>
</html>这里是左边和底部的代码：
<div class="bottom-left"></div>
<div class="div"></div>
.bottom-left {
height: 145px;
width: 155px;
top: 51.9%;
left: 37.5%;
position: absolute;
margin: auto;
display: block;
border-radius: 0 0 0 250px;
background-color: rgba(255, 255, 255, .3);
}
.div {
position: absolute;
top: 60.25%;
left: 50%;
transform: translate(-50%, -50%);
height: 152px;
width: 320px;
border-radius: 0 0 150px 150px;
background-color: #457CB0;
}
【问题讨论】：
-
为什么不使用
%或vh、vw中的单位？为什么要复制meta name="viewport"？ -
嗨，我使用了 % 单位，但它们似乎不适用于这两个对象。
-
尝试将 .bottom-left 和 .div 放在一个弹性盒子里，对于弹性盒子做空间均匀
-
我试过了，但它似乎不再起作用了！
标签： javascript html jquery css bootstrap-4