css实现圆图

作者: 辉色星空下 | 来源:发表于2024-05-07 15:26 被阅读0次

css 雷达
CSS之clip-path
用 CSS 实现各种几何图形
2019-03-05
动态文字彩色背景滚动效果
用css实现不规则背景填充
一行代码实现太极图(阴阳八卦)
webpack css图像合图实现
自定义View之qq气泡拖拽消失效果
css-Sprite （雪碧图）

<!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