zoukankan      html  css  js  c++  java
  • 纯CSS实现饼图、环形图(百分比)

    一、饼图

    .pie {
         100px;
        height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, #655 0);
    }
    
    .pie::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0/50%;
        background-color: inherit;
        transform-origin: left;
        transform: rotate(.2turn);
    }
    
    <div class="pie"></div>
    

    二、环形图

    .loading {
    	margin: 100px auto;
    	 8em;
    	height: 8em;
    	position: relative;
    }
    
    .loading .progress {
    	position: absolute;
    	 6em;
    	height: 6em;
    	background-color: white;
    	border-radius: 50%;
    	left: 1em;
    	top: 1em;
    	line-height: 6em;
    	text-align: center;
    }
    
    .left,
    .right {
    	 4em;
    	height: 8em;
    	overflow: hidden;
    	position: relative;
    	float: left;
    	background-color: #999999
    }
    
    .left {
    	border-radius: 8em 0 0 8em;
    }
    
    .right {
    	border-radius: 0 8em 8em 0;
    }
    
    .left:after,
    .right:after {
    	content: "";
    	position: absolute;
    	display: block;
    	 4em;
    	height: 8em;
    	background-color: white;
    	border-radius: 8em 0 0 8em;
    	background-color: red;
    }
    
    .right:after {
    	content: "";
    	position: absolute;
    	display: block;
    	border-radius: 0 8em 8em 0;
    }
    .left:after {
    	transform-origin: right center;
    }
    
    .right:after {
    	transform-origin: left center;
    	transform: rotateZ(45deg);
    }
    
    <div class="loading">
    	<div class="left"></div>
    	<div class="right"></div>
    	<div class="progress">85%</div>
    </div>
    
  • 相关阅读:
    rabbitmq fanout模式(发布订阅)
    rabbitmq php 限流
    rabbitmq 延迟队列 php
    rabbitmq 死信队列 php
    php rabbitmq发送消息并判断消息是否发送成功 ack comfirm机制
    php使用activemq
    golang 冒泡排序实现
    依耐项属性- 在需要使用的情况下添加
    Path 详解 之WPF
    WPF FrameWorkElement->UIElement->Visual
  • 原文地址:https://www.cnblogs.com/liangjing-yy/p/9008998.html
Copyright © 2011-2022 走看看