Is there a CSS property to control or set the length of each side of a div

Question

I've searched endlessly a way to control the length of each side of div in CSS. Just as you can control the color and width of each border. The aim is to create an irregular shape (Not square, not rectangle, perhaps a trapezium). I thought there could be something like

length-top:200px;
length-right: 150px;
length-bottom:300px;
length-left:100px;

If there's no way of doing that in CSS, what is the procedure to suggest augmentation of these properties?

Have you seen, https://css-tricks.com/the-shapes-of-css/#trapezoid-shape, from the site https://css-tricks.com/the-shapes-of-css/ — njc, Jan 27 '21 at 06:43
I managed it with the `clip-path` property. Thanks @Aleksandar — landrykapela, Jan 28 '21 at 09:02

score 0 · Answer 1 · answered Jan 27 '21 at 07:23

You should try this..

div {    
  width:250px;
  height:100px;
  border:2px solid red;        
  margin-left:100px;
  margin-bottom: 0;
  margin-top: 5px;
}
.trapezium {
  margin-top: 0;
  border-top-width:4px;
  border-bottom-width:1px;
  -webkit-transform: perspective(150px) rotateX(40deg);    
}

<div class="trapezium"></div>

Is there a CSS property to control or set the length of each side of a div

1 Answers1