css实现圆图
2024-05-07 本文已影响0人
辉色星空下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.app {
background-color: #fcfcfc;
}
.mainPage {
text-align: center;
padding-top: 120px;
}
.conentPage {
margin: 0 auto;
width: 300px;
text-align: center;
}
.pa {
position: absolute;
}
.text-color {
color: #fcfcfc;
}
.text-size {
font-size: 16px;
}
.middle-a {
display: flex;
justify-content: center;
align-items: center;
}
.bigCircle {
text-align: center;
background-color: rgb(57, 57, 242);
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
}
.minCircle {
background-color: #fcfcfc;
width: 60%;
height: 60%;
border-radius: 50%;
z-index: 100;
}
.arrow-right {
height: 120px;
width: 60px;
display: inline-block;
position: absolute;
top: 6px;
left: 80px;
}
.arrow-right::after {
content: "";
height: 50px;
width: 50px;
border-width: 4px 4px 0 0;
border-color: #fcfcfc;
border-style: solid;
position: absolute;
transform: matrix(0.71, 0.71, -0.71, 0.6, 0, 0);
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
border: 38px solid;
border-color: #fcfcfc transparent transparent transparent;
top: 138px;
right: -6px;
}
.arrow-down::after {
content: "";
position: absolute;
top: -38px;
left: -32px;
border: 32px solid;
border-color: rgb(57, 57, 242) transparent transparent transparent;
}
.arrow-left {
height: 120px;
width: 60px;
display: inline-block;
position: absolute;
bottom: -60px;
left: 98px;
}
.arrow-left::after {
content: "";
height: 50px;
width: 50px;
border-width: 0px 0px 4px 4px;
border-color: #fcfcfc;
border-style: solid;
position: absolute;
transform: matrix(0.71, 0.71, -0.71, 0.6, 0, 0);
}
.arrow-up {
width: 0;
height: 0;
position: absolute;
border: 38px solid;
border-color: transparent transparent #fcfcfc transparent;
top: 80px;
left: -6px;
}
.arrow-up::after {
content: "";
position: absolute;
top: -26px;
left: -32px;
border: 32px solid;
border-color:transparent transparent rgb(57, 57, 242) transparent;
}
.text1{
position:absolute;
left: 56px;
top:19px;
}
.text2{
position:absolute;
left: 228px;
top: 38px;
}
.text3{
position:absolute;
right: 38px;
bottom: 38px;
}
.text4{
position:absolute;
bottom: 38px;
left: 40px;
}
</style>
</head>
<body>
<div class="app">
<div class="mainPage">
<div class="conentPage">
<div class="bigCircle middle-a">
<div class="text1 text-color text-size pa">
<p>数据<br />质量</p>
</div>
<div class="text2 text-color text-size pa">
<p>数据<br />质量</p>
</div>
<div class="text3 text-color text-size pa">
<p>数据<br />质量</p>
</div>
<div class="text4 text-color text-size pa">
<p>数据<br />质量</p>
</div>
<div class="arrow-right"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-up"></div>
<div class="minCircle"></div>
</div>
</div>
</div>
</div>
</body>
</html>
css效果如下：
image.png
