【发布时间】：2019-11-09 19:56:54
【问题描述】：
我已经构建了一个仅 CSS 的饼图，但我需要在每个切片之间添加空间，几乎就像它是一个边框一样。我尝试为每个切片添加边框，但这实际上不起作用。
关于如何使这个 CSS 饼图看起来更像下图的任何想法？
这是我的代码：
.palette {
height: 48px;
width: 48px;
}
.palette .colorOuter1,
.palette .colorOuter2,
.palette .colorOuter3,
.palette .colorOuter4,
.palette .colorOuter5 {
height: 200px;
width: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
clip: rect(0px, 200px, 200px, 100px);
}
.palette .colorOuter1 {
clip: auto;
background: #eee;
}
.palette .colorOuter2 {
transform: rotate(0deg);
}
.palette .colorOuter2 {
transform: rotate(72deg);
}
.palette .colorOuter3 {
transform: rotate(144deg);
}
.palette .colorOuter4 {
transform: rotate(216deg);
}
.palette .colorOuter5 {
transform: rotate(288deg);
}
.palette .colorInner1,
.palette .colorInner2,
.palette .colorInner3,
.palette .colorInner4,
.palette .colorInner5 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%;
transform: rotate(72deg);
}
.palette .colorInner1 {
background: #5D5E63;
clip: rect(0px, 100px, 200px, 0px);
}
.palette .colorInner2 {
background-color: #AEADA9;
clip: rect(0px, 100px, 100px, 0px);
}
.palette .colorInner3 {
background-color: #D5C4A8;
clip: rect(0px, 100px, 100px, 0px);
}
.palette .colorInner4 {
background-color: #AA875F;
clip: rect(0px, 100px, 100px, 0px);
}
.palette .colorInner5 {
background-color: #B7CBC7;
clip: rect(0px, 100px, 100px, 0px);
}
.palette .centerOverlay {
position: absolute;
border-radius: 50%;
top: 60px;
left: 60px;
background: #fff;
width: 80px;
height: 80px;
display: block;
clip: auto;
}<div class="palette">
<div class="colorOuter1">
<div class="colorInner1"></div>
</div>
<div class="colorOuter2">
<div class="colorInner2"></div>
</div>
<div class="colorOuter3">
<div class="colorInner3"></div>
</div>
<div class="colorOuter4">
<div class="colorInner4"></div>
</div>
<div class="colorOuter5">
<div class="colorInner5"></div>
</div>
<div class="centerOverlay"></div>
</div>【问题讨论】：
标签： css pie-chart css-shapes