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

Question

.navbar{

	background-color: purple;
	width: 70%;
	height: 40px;
	transform: skewX(20deg);
	padding: 0px;
}

<div class="navbar"></div>

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

Answer 1

Попробуйте это:

clip-path: polygon(0 0, 100% 0%, 85% 81%, 13% 80%);

Примените его теперь в div. Вы можете изменить значения в соответствии со своими потребностями. Надеюсь, это поможет вам.

Answer 2

Вы можете попробовать clip-path свойство вместо transform.

Clippy - удобный инструмент для создания css путей клипов, посмотрите