Трапеция с рамкой

Question

Я создал трапецию с помощью CSS.

HTML:

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

CSS:

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

Вот мой Fiddle: https://jsfiddle.net/sfck34y3/

Вот реальный результат:

Я хотел бы изменить высоту верхней и нижней точек, сделав ее ближе к прямоугольнику, чем сейчас. Как изменить ширину границ?

Answer 1

Вы можете использовать border-left-width, чтобы сохранить ширину трапеции и уменьшить верхние/нижние границы с помощью свойства border-width. Вы должны установить свойство border-left-width после border-width имущества, иначе он будет перекрываться:

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

---

Как commented по @Hashem Qolami свойство преобразования не нужно, чтобы получить эту ориентацию.
Вам просто нужно удалить преобразование и использовать правую границу вместо левого, чтобы сделать форму трапеции:

.trapezeG { 
 
    position: absolute; 
 
    left: 214px; 
 
    top: 120px; 
 
    width: 1px; 
 
    height: 70px; 
 
    border: 1px solid #069; 
 
    border-color: transparent #000000 transparent transparent; 
 
    border-width: 10px; 
 
    border-right-width: 32px; 
 
}

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

Answer 2

Левая сторона фигуры определяется по height из div. В то время как правая сторона определяется height + верхними/нижними границами.

Чтобы изменить высоту левой стороны, вам необходимо увеличить высоту и уменьшить ширину верхней/нижней границы, чтобы общая высота не изменилась.

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

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

---

А вот демо, что переходы между двумя размерами, чтобы продемонстрировать эффект: https://jsfiddle.net/sfck34y3/5/ (парить над формой)