You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
60 lines
1.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Input type="list"</title>
|
|
<style type="text/css">
|
|
:root{
|
|
--pie-size:300;
|
|
--pie-bg:#3434AF;
|
|
--red:#ed3457;
|
|
--green:#248991;
|
|
--orange:#ed8724;
|
|
--line-color:#cecece;
|
|
}
|
|
|
|
.pie,.target {
|
|
border-radius: 100%;
|
|
position: relative;
|
|
}
|
|
.pie {
|
|
height: calc( var(--pie-size,200) * 1px );
|
|
width: calc( var(--pie-size,200) * 1px );
|
|
background-color:var(--pie-bg,black);
|
|
top:5px;
|
|
left:5px;
|
|
}
|
|
.target {
|
|
height: calc( (var(--pie-size,200) + 10) * 1px );
|
|
width: calc( (var(--pie-size,200) + 10) * 1px );
|
|
background-color:var(--line-color,grey);
|
|
}
|
|
|
|
.references {
|
|
position:fixed;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
background-color:var(--line-color);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="target">
|
|
<div class="pie">
|
|
|
|
</div>
|
|
</div>
|
|
<p class="references">
|
|
<a href="https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e">
|
|
HOW TO: Pure CSS pie charts w/ CSS variables
|
|
<i>Create customisable pie charts in ~30 lines of CSS</i>
|
|
</a>
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|