HTML:
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<title>Circle</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="circle"><p class="innerCircle"></p></div>
</body>
</html>
CSS:
.circle {
width: 450px;
height: 450px;
border-top: 30px solid #416fa6;
border-right: 30px solid #718242;
border-bottom: 30px solid #63ae98;
border-left: 30px solid #b45447;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
}
.innerCircle {
width: 0px;
height: 0px;
border-top: 210px solid #416FA6;
border-left: 210px solid #B45447;
border-right: 210px solid #718242;
border-bottom: 210px solid #FFA500;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
margin-left: 15px;
margin-right:0px;
margin-top: 15px;
margin-bottom:0px;
/* border-radius: 50%;
background-color: green; */
}
我想用线把一个圆分成12部分内圆如下图所示。我尝试了一些但不完全。所以请给一些想法。
提前致谢。
这可以使用 CSS 转换来完成
-
对于 12 个相等的切片，每个切片角度将为 30 度。
-
我们需要根据垂直轴和切片起点之间的角度旋转每个切片。所以第一个切片将旋转 0deg，最后一个切片将旋转 330deg
-
此外，我们需要将每个切片倾斜负数（90 度 - 切片角度）
在这种情况下，它是 -(90deg - 30deg) =skewY(-60deg)
-
关于正文：
a) 我们需要使用以下命令来恢复切片内容的倾斜skewY(60deg)
b) 为了使文本在切片中居中，我们需要将其旋转切片角度的一半，因此：rotate(15deg)
FIDDLE http://jsfiddle.net/danield770/hwpa0uk1/9/
.circle {
position: relative;
border: 1px solid black;
padding: 0;
margin: 1em auto;
width: 20em;
height: 20em;
border-radius: 50%;
list-style: none;
overflow: hidden;
}
li {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
}
.text {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
text-align: center;
transform: skewY(60deg) rotate(15deg);
padding-top: 20px;
}
li:first-child {
transform: rotate(0deg) skewY(-60deg);
}
li:nth-child(2) {
transform: rotate(30deg) skewY(-60deg);
}
li:nth-child(3) {
transform: rotate(60deg) skewY(-60deg);
}
li:nth-child(4) {
transform: rotate(90deg) skewY(-60deg);
}
li:nth-child(5) {
transform: rotate(120deg) skewY(-60deg);
}
li:nth-child(6) {
transform: rotate(150deg) skewY(-60deg);
}
li:nth-child(7) {
transform: rotate(180deg) skewY(-60deg);
}
li:nth-child(8) {
transform: rotate(210deg) skewY(-60deg);
}
li:nth-child(9) {
transform: rotate(240deg) skewY(-60deg);
}
li:nth-child(10) {
transform: rotate(270deg) skewY(-60deg);
}
li:nth-child(11) {
transform: rotate(300deg) skewY(-60deg);
}
li:nth-child(12) {
transform: rotate(330deg) skewY(-60deg);
}
li:first-child .text {
background: green;
}
li:nth-child(2) .text {
background: tomato;
}
li:nth-child(3) .text {
background: aqua;
}
li:nth-child(4) .text {
background: yellow;
}
li:nth-child(5) .text {
background: orange;
}
li:nth-child(6) .text {
background: purple;
}
li:nth-child(7) .text {
background: cyan;
}
li:nth-child(8) .text {
background: brown;
}
li:nth-child(9) .text {
background: gray;
}
li:nth-child(10) .text {
background: pink;
}
li:nth-child(11) .text {
background: maroon;
}
li:nth-child(12) .text {
background: gold;
}
<ul class="circle">
<li>
<div class="text">1</div>
</li>
<li>
<div class="text">2</div>
</li>
<li>
<div class="text">3</div>
</li>
<li>
<div class="text">4</div>
</li>
<li>
<div class="text">5</div>
</li>
<li>
<div class="text">6</div>
</li>
<li>
<div class="text">7</div>
</li>
<li>
<div class="text">8</div>
</li>
<li>
<div class="text">9</div>
</li>
<li>
<div class="text">10</div>
</li>
<li>
<div class="text">11</div>
</li>
<li>
<div class="text">12</div>
</li>
</ul>
NB:IE9 和 Safari/iOS 分别需要 -ms 和 -webkit 供应商前缀。 (caniuse http://caniuse.com/#feat=transforms2d)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
