将圆分割为多个扇形

最新推荐文章于 2023-03-31 17:33:42 发布

接着奏乐吧

最新推荐文章于 2023-03-31 17:33:42 发布

阅读量864

点赞数 2

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_39831234/article/details/121301717

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扇形</title>
  <style>
  
 
.pie {
    position: relative;
    margin: 1em auto;
    padding: 0;
    width: 32em;
  height: 32em;
    border-radius: 50%;
    list-style: none;
  overflow: hidden;
}
.slice {
    overflow: hidden;
    position: absolute;
    top: 0; 
  right: 0;
    width: 50%;
  height: 50%;
    transform-origin: 0% 100%; 
     color:#fff;
}
.slice-one {
  transform: rotate(30deg) skewY(-30deg);
  background: black;
}
.slice-two {
  transform: rotate(-30deg) skewY(-30deg);
  background: yellow;
}
.slice-three {
  transform: rotate(-90deg) skewY(-30deg);
  background: black;
}
.slice-four {
  transform: rotate(-150deg) skewY(-30deg);
  background: yellow;
}
.slice-five {
  transform: rotate(-210deg) skewY(-30deg);
  background: black;
}
.slice-six {
  transform: rotate(-270deg) skewY(-30deg);
  background: yellow;
}
 
  </style>
</head>
<body>
 
<ul class='pie'>
    <li class='slice-one slice'> <div style="transform: rotate(
48deg);padding-top:107px"  >
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div> </li> 
    <li class='slice-two slice'>33 </li>
    <li class='slice-three slice'>3132 </li>
    <li class='slice-four slice'>123123 </li>
    <li class='slice-five slice'>123</li>
    <li class='slice-six slice'>1233 </li>
  <ul>
</body>
</html>

有一个大佬提供的代码，借鉴，将div内部的显示扶正思路

接着奏乐吧

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
将圆分割为多个扇形

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>扇形</titl
复制链接

扫一扫