更改div元素的形状并将它们定位为切片披萨

时间：2015-05-28 22:11:52

标签： css html5

看看图片。它看起来像切片披萨。现在我的问题是如何使用div来制作这个东西。

我在寻找：

  1. 如何将div塑造成披萨片

  2. 如何将它们放入圆圈

    3. Sliced circle, like a pizza

    编辑：伙计们，我可以在没有边境属性的情况下进行吗？我的意思是，我想用内容填充这些内容。有什么帮助吗？

2 个答案:

答案 0 :(得分：2)

只有我父亲会尝试切一块七片披萨。我是那个最小的孩子。基本上你的披萨有6片，每片60度。每个切片的第一部分（没有“.pizza”）告诉每个DIV确切的起点。所以每一个都必须以60的增量进行调整。它们不会相互增加。下一部分（带有“.pizza”）是切片绕曲线移动的距离。那里的每片都是60片。所有这些值必须总计达到360，否则可能会破坏或重叠。如果您将以下所有代码放在文本文件中，请将其另存为.html并在应显示的浏览器中打开它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Pizza Chart</title>
<style>
body {
    font-family:Tahoma, Geneva, sans-serif;
}
h2 {
    text-align:center;
}
.chart {
    position:relative;
    width:500px;
    height:250px;
}
.hold {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
    left:300px;
}
.Pizza {
    position:absolute;
/*  width:100px;
    height:200px;
    border-radius:100px 0 0 100px;
    transform-origin:right center; */
    width:200px;
    height:200px;
    clip:rect(0px,100px,200px,0px);
    border-radius:100px; 
}
</style>
</head>
<body>
<style>
<style>
     .PizzaContainer {
          height: 100px;
          width: 100px;
          float: right;
          margin: 0 0 20px 20px;
     }
     #PizzaSliceYellow .Pizza {
          background-color: #f2cd00;
          transform:rotate(60deg);
     }
     #PizzaSliceBlue {
          transform:rotate(60deg);
     }
     #PizzaSliceBlue .Pizza {
          background-color: #002095;
          transform:rotate(60deg);
     }
     #PizzaSliceRed {
          transform:rotate(120deg);
     }
     #PizzaSliceRed .Pizza {
          background-color: #950000;
          transform:rotate(60deg);
     }
      #PizzaSliceOlive {
          transform:rotate(180deg);
     }
     #PizzaSliceOlive .Pizza {
          background-color: #a5a000;
          transform:rotate(60deg);
     }
     #PizzaSliceOrange {
          transform:rotate(240deg);
     }
     #PizzaSliceOrange .Pizza {
          background-color: #f5a010;
          transform:rotate(60deg);
     }
      #PizzaSliceLime {
          transform:rotate(300deg);
     }
     #PizzaSliceLime .Pizza {
          background-color: #99FF00;
          transform:rotate(60deg);
     }
</style>
<div class="PizzaContainer">
<div class="PizzaBackground"></div>
<div id="PizzaSliceYellow" class="hold">
<div class="Pizza"></div>
</div>
<div id="PizzaSliceBlue" class="hold">
<div class="Pizza"></div>
</div>
<div id="PizzaSliceRed" class="hold">
<div class="Pizza"></div>
</div>
<div id="PizzaSliceOlive" class="hold">
<div class="Pizza"></div>
</div>
<div id="PizzaSliceOrange" class="hold">
<div class="Pizza"></div>
</div>
<div id="PizzaSliceLime" class="hold">
<div class="Pizza"></div>
</div>
</div>
</body>
</html>

答案 1 :(得分：1)

我相信这有点像你在寻找什么？免责声明：这不是我的！它来自http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

制作投影阴影圈

首先创建一个带阴影的圆圈，然后将其放在div中，这样我们就可以在其上叠加额外的圆圈。下面的div具有设定的高度，因此它与内容保持一致。只需添加一个边距半径为方形div宽度的一半像素值。

.pieContainer {
  height: 100px;
}
.pieBackground {
  background-color: grey;
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: -1px 1px 3px #000;
  -webkit-box-shadow: -1px 1px 3px #000;
  -o-box-shadow: -1px 1px 3px #000;
  box-shadow: -1px 1px 3px #000;
} 
<div id="pieContainer">
  <div class="pieBackground"></div>
</div>

将切片添加到CSS饼图

接下来使用剪辑创建一个半圆。外部div控制旋转，然后内部div控制大小。将外部div设置为0，这样您只需编辑其他切片即可。

.pieContainer {
  height: 100px;
}
.pieBackground {
  background-color: grey;
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: -1px 1px 3px #000;
  -webkit-box-shadow: -1px 1px 3px #000;
  -o-box-shadow: -1px 1px 3px #000;
  box-shadow: -1px 1px 3px #000;
} 
.pie {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 50px, 100px, 0px);
}
.hold {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
  background-color: #1b458b;
  -webkit-transform:rotate(50deg);
  -moz-transform:rotate(50deg);
  -o-transform:rotate(50deg);
  transform:rotate(50deg);
}
<div id="pieContainer">
  <div class="pieBackground"></div>
  <div id="pieSlice1" class="hold"><div class="pie"></div></div>
</div>

大＆amp;多个切片

对于超过50％的切片，您只需添加另一个具有相同背景颜色的切片。

.pieContainer {
  height: 100px;
}
.pieBackground {
  background-color: grey;
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: -1px 1px 3px #000;
  -webkit-box-shadow: -1px 1px 3px #000;
  -o-box-shadow: -1px 1px 3px #000;
  box-shadow: -1px 1px 3px #000;
} 
.pie {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 50px, 100px, 0px);
}
.hold {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 100px, 100px, 50px);
}
#pieSliceBlue .pie {
  background-color: #1b458b;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
}
#pieSliceBlue2 {
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
}
#pieSliceBlue2 .pie {
  background-color: #1b458b;
  -webkit-transform:rotate(40deg);
  -moz-transform:rotate(40deg);
  -o-transform:rotate(40deg);
  transform:rotate(40deg);
}
#pieSliceRed {
  -webkit-transform:rotate(220deg);
  -moz-transform:rotate(220deg);
  -o-transform:rotate(220deg);
  transform:rotate(220deg);
}
#pieSliceRed .pie {
  background-color: #cc0000;
  -webkit-transform:rotate(140deg);
  -moz-transform:rotate(140deg);
  -o-transform:rotate(140deg);
  transform:rotate(140deg);
}
<div id="pieContainer">
  <div class="pieBackground"></div>
  <div id="pieSliceBlue" class="hold"><div class="pie"></div></div>
  <div id="pieSliceBlue2" class="hold"><div class="pie"></div></div>
  <div id="pieSliceRed" class="hold"><div class="pie"></div></div>
</div>

IE Fallback 正如预期的那样，这在版本9以下的任何Internet Explorer浏览器中都不起作用。如果您关注IE用户，一种解决此问题的简单方法是为IE添加条件注释，其中包含您正在尝试的任何图表的jpg显示。

相关问题
最新问题