Creating an Isoceles Trapezoid Shape

Trapezoid div in CSS

Here is a way to create a trapzoid like div.
This uses the ::before and ::after pseudo elements

.example {  margin: 20px 0px;  position: relative;  display: inline-block;  width: 200px;  height: 200px;  background-color: gray;  color: white;  font-size: 2rem;}.example::before {  content: "";  position: absolute;  top: -20px;  border-top: 20px solid transparent;  border-left: 0px solid transparent;  border-right: 200px solid gray;  border-bottom: 0px solid gray;}.example::after {  content: "";  position: absolute;  bottom: -20px;  border-bottom: 20px solid transparent;  border-left: 0px solid transparent;  border-right: 200px solid gray;  border-top: 0px solid gray;}

<div class="example">  <p>Example</p></div>

How to make a trapezium with a border

You can use pseudo-element and use perspective on parent to create that shape as background.

body {  background: lightblue;}div {  width: 150px;  height: 40px;  padding: 20px;  display: flex;  align-items: center;  justify-content: center;  position: relative;  -webkit-perspective: 130px;  perspective: 130px;  margin: 50px;}div:after {  position: absolute;  width: 100%;  height: 100%;  background: lightgreen;  border: 1px solid white;  content: '';  left: 0;  top: 0;  z-index: -1;  -webkit-transform: rotateX(20deg) rotateY(0deg);  transform: rotateX(20deg) rotateY(0deg);}

<div>Some text</div>

Image as isosceles trapezoid PHP GD

Right, basically that code should generate the right values, but due to a bug has a lot of cludges in place to get a trapezium shape. The bug is that the copy of each line has the destination-y and the source-y values transposed. The source-y should always be 0, the destination-y should change.

There were also a few other small numerical bugs and double rounding at unnecessary points throwing off the results.

Also, the variable naming was atrocious, so I have rewritten it so that the entire function is clear.

Try the following:

function makeTrapeziumImage($image, $gradient, $rightToLeft = false, $background = 0xFFFFFF, $supersampleScale = 3) {
  $originalWidth = imagesx($image);
  $originalHeight = imagesy($image);

  $supersampledWidth = $originalWidth * $supersampleScale;
  $supersampledHeight = $originalHeight * $supersampleScale;

  $supersampledImage = imagecreatetruecolor($supersampledWidth, $supersampledHeight);

  imagecopyresized($supersampledImage, $image,
                   0, 0, 0, 0,
                   $supersampledWidth, $supersampledHeight, $originalWidth, $originalHeight);

  $workingImage = imagecreatetruecolor($supersampledWidth, $supersampledHeight);

  $backgroundColour = imagecolorallocate($workingImage, ($background >> 16) & 0xFF, ($background >> 8) & 0xFF, $background & 0xFF);
  imagefill($workingImage, 0, 0, $backgroundColour);

  imageantialias($workingImage,true);

  $endHeight = $supersampledHeight - ($supersampledHeight * $gradient);

  for ($x = 0; $x < $supersampledWidth; $x++) {
    $cX = ($rightToLeft ? $supersampledWidth - $x : $x);

    $dstHeight = $supersampledHeight - ((($cX + 1) / $supersampledWidth) * $endHeight);

    $dstY = intval(($supersampledHeight - $dstHeight) / 2) - 1; // -1 required as zero-indexed
    $dstY = ($dstY < 0 ? 0 : $dstY); // Rounding can make $dstY = -1

    $dstHeight = intval($dstHeight); // Round the height after calculating $dstY

    imagecopyresampled($workingImage, $supersampledImage,
                       $cX, $dstY, $cX, 0,
                       1, $dstHeight, 1, $supersampledHeight);
  }

  imagedestroy($supersampledImage);
  imagefilter($workingImage, IMG_FILTER_SMOOTH, 10);

  $resizedImage = imagecreatetruecolor($originalWidth, $originalHeight);
  imageantialias($resizedImage, true);

  imagecopyresampled($resizedImage, $workingImage,
                     0, 0, 0, 0,
                     $originalWidth, $originalHeight, $supersampledWidth, $supersampledHeight);

  imagedestroy($workingImage);

  return $resizedImage;
}

The essential mechanism of the inner loop, as before, is to take each column of pixels, along the x-axis and resize them over a gradient. It naturally creates an isosceles trapezium. In order to create a non-isosceles trapezoid, another gradient would have to be specified. Alternatively, a set of start and end y-values could be specified and the gradients calculated from them.

Whilst this example works along the x-axis, in either direction as before, it could just as easily work along the y-axis (or the image could be rotated 90 degrees, processed, then rotated back).

How to resize trapezoid in CSS when browser window resize

You can't apply percentage units to border but you can achieve your aim with vw units :

1/100th of the width of the v+iewport. (source : MDN)

DEMO

body {    position:relative;    height:500px;    margin:0;    padding:0;}#personal {    position:relative;    background-color: red;    width:100%;    height:100%;}#floor {    position:absolute;    top:10px;    border-bottom: 300px solid black;    border-left: 19vw solid transparent;    border-right: 19vw solid transparent;    height: 10%;    width: 60vw;}

<body>    <div id="personal">        <div id="floor"></div>    </div></body>

square to trapezoid

a,b,c,d are the four corners of your 2D square.

a,b,c,d are expressed in homogeneous coordinate and so they are 3x1 matrices.

alpha, beta, gamma, delta are the four corners of your 2D trapezoid.

alpha, beta, gamma, delta are expressed in homogeneous coordinate and so they are 3x1 matrices.

H is the 3x3 matrix you are looking for, it is also called an homography

    h1 h2 h3
H = h4 h5 h6
    h7 h8 h9

H maps a,b,c,d into alpha, beta, gamma, delta and so you have the following four equations

alpha=H*a
beta=H*b
gamma=H*c
delta=H*d

Assuming you know a,b,c,d and alpha, beta, gamma, delta you can solve the previous four equation system for the nine unknowns h1, h2, h3, h4, h5, h6, h7, h8, h9.

Here I have just described a "raw" solution to the problem, that, in principle, can work; for a detailed explanation of the above mentioned method you can see for example this page http://www.corrmap.com/features/homography_transformation.php where they put h9=1 (since H can be expressed just with 8 parameters) and then solve a linear system of eight equations in eight unknowns. You can find a similar explanation in section 2 of the thesis Homography Estimation by Elan Dubrofsky.

Another explanation is Using Projective Geometry to Correct a Camera by David Austin in the 2013 March issue of Feature Column from the AMS.

The above mentioned method, with its disadvantages, is described in chapter 4 "Estimation - 2D Projective Transformation" in the second edition of Multiple view geometry in computer vision by Richard Hartley and Andrew Zissermann where they also describe different and better algorithms; you can check this link http://www.cse.iitd.ac.in/~suban/vision/geometry/node24.html which seems to follow the same book.

You can find another explanation of the homography in section 15.1.4, "Projective transformation model" of the book Computer Vision: Models, Learning, and Inference by Simon J.D. Prince. The algorithm Algorithm 15.4: maximum likelihood learning of projective transformation (homography) is outlined in his Algorithms booklet: the problem is solved by means of a non-linear minimization.

Trapeze with border

You can use border-left-width to keep the width of the trapeze and reduce the top/bottom borders with the border-width property. You need to set the border-left-width property after the border-width property otherwise it will be overriden :

.trapezeG {  position: absolute;  left: 214px;  top: 120px;  width: 1px;  height: 70px;  border: 1px solid #069;  border-color: transparent transparent transparent #000000;  border-width: 10px;  border-left-width: 32px;  transform: rotate(180deg);}

<div class="trapezeG"></div>

Find intersecting area of two trapezoids in OpenCV

Draw the trapezoids or polygons using CV_FILLED or fillPoly in two matrix and AND them logically. Area of intersection is:

int area_int = countNonZero(bitwise_and(TrapeZoidMatA,TrapeZoidMatB));

I think this would be much efficient in this case.

css div containers with irregular shapes

Since all the answers use 2 elements, let's post another with a single element. Uses padding to keep the text inside the trapezoid, and 2 gradients to create the background in trapezoid shape

div {  width: 300px;  padding: 0px 50px;  background-image: linear-gradient(80deg, transparent 40px, lightblue 40px), linear-gradient(-80deg, transparent 40px, lightblue 40px);  background-size: 51% 100%;  background-position: left bottom, right bottom;  background-repeat: no-repeat;}

<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>