Как сделать div в форме прямоугольной трапеции?

Как можно сделать такой div? Объясните, пожалуйста, как делать это с помощью shape-inside: polygon(). Не понимаю, как правильно прописать x1y1x2y2x3y3x4y4. C какого угла идёт отсчёт, в каких единицах измерять координаты?

Ответ

.hh { background: rgba(0, 0, 0, .5); width: 300px; position: relative; height: 2em; } .hh:after { box-sizing: border-box; position: absolute; content: ''; width: 2em; height: 100%; left: 100%; top: 0; border: 1em solid rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5) transparent transparent rgba(0, 0, 0, 0.5); }

Если я правильно вас понял. Или должен быть принципиально

?
P. S.: Теперь о том, как это работает.
Всё основано на том, что угловой стык границ производится под углом в 45°. При этом цвет и прозрачность границы не имеет значения, стык (или место под него) всё равно будет иметь скос.
div { width: 42pt; height: 42pt; border: 2em solid; border-color: orange lightgreen blue transparent; }

Псевдоэлемент .hh:after — это квадрат со стороной в высоту основного элемента (.hh), размещённый по правую сторону от этого элемента. С помощью эффекта, описанного в пункте 1, данный квадрат был превращён в треугольник.
.hh { background: rgba(0, 0, 0, .5); width: 300px; position: relative; height: 2em; } .hh:after { box-sizing: border-box; position: absolute; content: ''; width: 2em; height: 100%; left: 100%; top: 0; border: 1em solid red; border-color: red transparent transparent red; }