zoukankan html css js c++ java

css 画圆环百分比

直接贴代码：

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" type="text/css" href="mycircle.css" />
    <title>圆环-百分比</title>
</head>
<body class="bk01-bg-body">
    <div class="kb01-circle">
        <div class="kb01-circle-chart01 kb01-circle-percent-circle kb01-circle-percent-circle-left">
            <div class="kb01-circle-chart01-left-rotate kb01-circle-left-content"></div>
        </div>
        <div class="kb01-circle-chart01 kb01-circle-percent-circle kb01-circle-percent-circle-right">
            <div class="kb01-circle-chart01-right-rotate kb01-circle-right-content"></div>
        </div>
        <div class="kb01-circle-chart01-inside kb01-circle-c-c-inside">1000</div>
    </div>
</body>
</html>

mycircle.css：

.kb01-circle {
  position: relative;
  margin: 0 auto;
  width: 170px;
  height: 170px;
}

.kb01-circle-chart01 {
    background: red;
}
.kb01-circle-chart01-inside {
    color: red;
}
.kb01-circle-chart01-left-rotate {
    /* transform: rotate(110deg);  角度调节 */
}
.kb01-circle-chart01-right-rotate {
    transform: rotate(20deg);
}

.kb01-circle-percent-circle {
  position: absolute;
  height: 100%;
  overflow: hidden;
}
.kb01-circle-percent-circle-left {
  left: 0;
  width: 85px;
  border-radius: 85px 0 0 85px/85px 0 0 85px;
}
.kb01-circle-left-content {
  position: absolute;
    content: ‘‘;
    width: 100%;
    height: 100%;
    transform-origin: right center;
    border-radius: 50px 0 0 50px/50px 0 0 50px;
    background: #e5edff;
}
.kb01-circle-percent-circle-right {
  right: 0;
  width: 85px;
  transform-origin: right center;
  border-radius: 0 85px 85px 0/0 85px 85px 0;
}
.kb01-circle-right-content {
  position: absolute;
  content: ‘‘;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  border-radius: 0 85px 85px 0/0 85px 85px 0;
  background: #e5edff;
}
.kb01-circle-c-c-inside {
  position: absolute;
  top: 34px;
  left: 34px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 100%;
  font-size: 30px;
  font-weight: bold;
}

查看全文

相关阅读:
leetcode701. Insert into a Binary Search Tree
leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树、222. Count Complete Tree Nodes
leetcode 110. Balanced Binary Tree
leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
二叉树
 leetcode 124. Binary Tree Maximum Path Sum 、543. Diameter of Binary Tree(直径)
5. Longest Palindromic Substring
128. Longest Consecutive Sequence
Mac OS下Android Studio的Java not found问题，androidfound
安卓 AsyncHttpClient

原文地址：https://www.cnblogs.com/smartbear/p/12705895.html

css 画圆环 百分比

css 画圆环百分比