How to increase the size of a div arranged like a pizza without distorting the pizza-CodePudding

Using the answer to this question: https://stackoverflow.com/a/30518832/14035443.

I am wondering how to increase the size of the pizza without distorting the pizza. I tried increasing the width and height of the hold and the pizza as well as adjusting the clip however any adjustments I make distort the pizza. I tried scaling the size of the hold, however, it only increases the size of one slice.

HTML & CSS code below:

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>

CodePudding user response：

To make the whole pizza larger, you could just increase the values, like so:

body {
      font-family: Tahoma, Geneva, sans-serif;
    }
    
    h2 {
      text-align: center;
    }
    
    .chart {
      position: relative;
      width: 500px;
      height: 250px;
    }
    
    .hold {
      position: absolute;
      width: 500px;
      height: 500px;
      clip: rect(0px, 500px, 500px, 250px);
      left: 300px;
    }
    
    .Pizza {
      position: absolute;
      /*  width:100px;
        height:200px;
        border-radius:100px 0 0 100px;
        transform-origin:right center; */
      width: 500px;
      height: 500px;
      clip: rect(0px, 250px, 500px, 0px);
      border-radius: 250px;
    }
.PizzaContainer {
      height: 250px;
      width: 250
      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>

It's also probably a good idea to use something like CSS variables to avoid repeating all those constants. For example:

body {
      font-family: Tahoma, Geneva, sans-serif;
      --chart-size: 60px; /* Set this to whatever you want. */
      --chart-half-size: calc(var(--chart-size) / 2);
    }
    
    h2 {
      text-align: center;
    }
    
    .chart {
      position: relative;
      width: 500px;
      height: 250px;
    }
    
    .hold {
      position: absolute;
      width: var(--chart-size);
      height: var(--chart-size);
      clip: rect(0px, var(--chart-size), var(--chart-size), var(--chart-half-size));
      left: 300px;
    }
    
    .Pizza {
      position: absolute;
      /*  width:100px;
        height:200px;
        border-radius:100px 0 0 100px;
        transform-origin:right center; */
      width: var(--chart-size);
      height: var(--chart-size);
      clip: rect(0px, var(--chart-half-size), var(--chart-size), 0px);
      border-radius: var(--chart-half-size);
    }
.PizzaContainer {
      height: var(--chart-half-size);
      width: var(--chart-half-size);
      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>

CodePudding user response：

From the comments of question I understand that the goal of user is to change the whole size of chart so I added that code at the end of answer.

If the goal of you with the phrase the size of each slice is that you want to change the percentage of each slice (for example yellow has more space than blue) you can test the code below:

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>

You must understand the usage of transform:rotate(?deg); in each selector. When we say:

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

It means that the "Blue slice" will start at 90deg and continues until 120deg (90deg 30deg). So when you want to change the space of each slice you must play with these values, and increase it for one slice and decrease for another one, also change the start point of them to position them correctly.

I added

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

to the style-sheet for clearing the start point of yellow slice.

But if your goal is to only change the whole size of chart you must change .hold and .Pizza classes simultaneously like below:

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

I changed width, height, clip and border-radius proportionally. for example width from 200px to 400px and clip:rect(0px,200px,200px,100px); to clip:rect(0px,400px,400px,200px);.