色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

餅圖css

劉姿婷2年前6瀏覽0評論

餅圖是一種流行的數據可視化方式,它可以用來展示項目在整體中所占的比例。在web開發中,我們可以使用CSS來創建簡單的餅圖。

.pie-chart {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e0e0e0;
}
.pie-chart .slice {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0, 100px, 200px, 0);
transform-origin: center;
}
.pie-chart .slice-1 {
transform: rotate(50deg);
background-color: #f44336;
}
.pie-chart .slice-2 {
transform: rotate(100deg);
background-color: #9c27b0;
}
.pie-chart .slice-3 {
transform: rotate(200deg);
background-color: #4caf50;
}
.pie-chart .slice-4 {
transform: rotate(260deg);
background-color: #2196f3;
}
.pie-chart .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: black;
}

代碼中,我們使用了一個div容器來表示餅圖,它使用border-radius屬性將一個方塊變成圓形。接下來,我們創建了一些div元素來表示餅圖的切片,每個切片都有不同的顏色和旋轉角度。我們使用transform-origin屬性將旋轉中心放在餅圖的中心。最后我們在中心添加了一個div元素來顯示數據。

你可以根據你的需要調整這些樣式,更新顏色,大小,甚至添加動畫效果。使用CSS創建餅圖是一個非常簡單和有趣的事情,是一個可以讓你的web頁面更加漂亮的方式。