How to increase height of a div in one side?

Question

I want to increase the size of a div on one side using CSS. So it should look like the below image. Any suggestions?

Use `max-height` and `min-height` property, Do you want it to be a constant height or increase according to the internal elements? — Ali Yaghoubi, Oct 21 '21 at 08:14
I want constant height. Using maxHeight and minHeight, how can I increase the height of the right side? — Jerry, Oct 21 '21 at 08:17
Could you add some minimal code which shows how the element is set up? clip-path may be what you are looking for but can't tell from the info so far provided. — A Haworth, Oct 21 '21 at 08:18

score 3 · Answer 1 · answered Oct 21 '21 at 08:23

You can use clip-path paired with padding

.container {
  width: 300px;
  padding: 1rem;
  background: dodgerblue;
  clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 calc(100% - 1rem));
}

<div class="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quos quo dolorum vero cum! Ut, maxime. Vel culpa itaque quae consequatur repellat et quaerat cupiditate? Cum animi inventore odit id.

</div>

Gabriele Petrioli · Answer 2 · 2021-10-21T08:41:21.277

The "box model" is rectangular. If you want the actual box to look like this, you could rotate it around the Y axis with something like transform:perspective(5em) rotateY(-5deg);

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(66deg, rgba(0, 0, 0, 0.15) 2.38%, transparent 2.38%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 52.38%, transparent 52.38%, transparent 100%);
  background-size: 22.99px 51.63px;
}

.trapezoid {
  width: 10em;
  height: 10em;
  border: 1px solid black;
  padding: 1em;
  transform: perspective(5em) rotateY(-5deg);
  `
}

<div class="trapezoid">contents will become rotated too</div>

Or you could revert the rotation for the contents, to keeps them straight.

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(66deg, rgba(0, 0, 0, 0.15) 2.38%, transparent 2.38%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 52.38%, transparent 52.38%, transparent 100%);
  background-size: 22.99px 51.63px;
}

.trapezoid {
  width: 10em;
  height: 10em;
  border: 3px solid black;
  transform: perspective(5em) rotateY(-5deg);
}

.trapezoid .content {
  padding: 1em;
  width: 100%;
  height: 100%;
  transform: perspective(5em) rotateY(5deg);
}

<div class="trapezoid">
  <div class="content">contents will become rotated too, unless you rotate them in the oppossite direction</div>
</div>

score 1 · Accepted Answer · answered Oct 21 '21 at 08:29

1

Elements in HTML are intrinsically rectangular.

You can however clip an element to a particular shape so that bits that lie outside the polygon are not shown.

This snippet is given two parameters, the minimum (left hand) height and the maximum (right hand) height. It then calculates in CSS how far down to set the first point on the clipping polygon:

.shape {
  --minheight: 20vmin;
  --maxheight: 30vmin;
  width: 30vmin;
  height: var(--maxheight);
  background-color: magenta;
  clip-path: polygon(0 calc(var(--maxheight) - var(--minheight)), 100% 0, 100% 100%, 0 100%);
}

<div class="shape"></div>

answered Oct 21 '21 at 08:29

A Haworth

30,908
4
11
14

This will not work with a border though, as depicted in the OP – Gabriele Petrioli Oct 21 '21 at 08:33
1

Correct, that's why I asked for actual code to be inserted as we can't tell from the diagram whether it's just depicting what an element's shape should be or whether it wants an actual border. It seems the answer is enough for the OP, but if not there are (messy) fiddles to make it look as though there is a border. – A Haworth Oct 21 '21 at 08:39
right, just noticed the comment :) – Gabriele Petrioli Oct 21 '21 at 08:43

How to increase height of a div in one side?

3 Answers3