时间戳

首页 > 解决方案 > 如何在不扭曲披萨的情况下增加像披萨一样排列的 div 的大小

html - 如何在不扭曲披萨的情况下增加像披萨一样排列的 div 的大小

问题描述

使用这个问题的答案：https ://stackoverflow.com/a/30518832/14035443 。

我想知道如何在不扭曲披萨的情况下增加披萨的大小。hold我尝试增加和pizza调整夹子的宽度和高度，但是我所做的任何调整都会扭曲比萨饼。我尝试缩放 的大小hold，但是，它只会增加一个切片的大小。

HTML & CSS 代码如下：

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;
    }
.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);
    }
<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>

标签： htmlcss

解决方案

从问题的评论中，我了解到用户的目标是更改图表的整体大小，因此我在答案末尾添加了该代码。

如果您使用短语the size of each slice的目标是您想要更改每个切片的百分比（例如黄色比蓝色有更多空间），您可以测试下面的代码：

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; 
}

.PizzaContainer {
      height: 100px;
      width: 100px;
      float: right;
      margin: 0 0 20px 20px;
 }
 #PizzaSliceYellow {
      transform:rotate(0deg);
 }
 #PizzaSliceYellow .Pizza {
      background-color: #f2cd00;
      transform:rotate(90deg);
 }
 #PizzaSliceBlue {
      transform:rotate(90deg);
 }
 #PizzaSliceBlue .Pizza {
      background-color: #002095;
      transform:rotate(30deg);
 }
 #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);
 }
<!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">
  <link rel="stylesheet" type="text/css" href="style2.css">
  <title>pie-chart2</title>
</head>
<body>
  <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>

您必须了解transform:rotate(?deg);每个选择器中的用法。当我们说：

#PizzaSliceBlue {
      transform:rotate(90deg);
 }
 #PizzaSliceBlue .Pizza {
      background-color: #002095;
      transform:rotate(30deg);
 }

这意味着“蓝色切片”将从90度开始，一直持续到120 度（90 度 + 30 度）。因此，当您想更改每个切片的空间时，您必须使用这些值，并为一个切片增加它并为另一个切片减少它，还要更改它们的起点以正确定位它们。

我添加了

#PizzaSliceYellow {
      transform:rotate(0deg);
 }

到样式表以清除黄色切片的起点。

但是，如果您的目标是仅更改图表的整个大小，则必须同时更改.hold和.Pizza类，如下所示：

.hold {
    position:absolute;
    width:400px;
    height:400px;
    clip:rect(0px,400px,400px,200px);
    left:300px;
}
.Pizza {
    position:absolute;
    width:400px;
    height:400px;
    clip:rect(0px,200px,400px,0px);
    border-radius:200px; 
}

我按比例更改了width,height和。例如宽度从 200px 到 400px和.clipborder-radiusclip:rect(0px,200px,200px,100px);clip:rect(0px,400px,400px,200px);

推荐阅读