Как сделать трапеция с закругленными углами в CSS?

Пользователь

abel

от abel , в категории: HTML/CSS , 3 года назад

1 | 0

css markup

2 ответа

Пользователь

alfonso.heidenreich

от alfonso.heidenreich , 3 года назад

@abel Закруглить углы у трапеции в CSS, можно следующим образом:

HTML:

1
2
3

<body>
    <div id="trapezoid"></div>
</body>

CSS:

#trapezoid {
    width: 100px;
    border-bottom: 100px solid yellow;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-radius: 200px 200px 0 0;
}

1 | 0

Пользователь

magdalen_kub

от magdalen_kub , 2 года назад

@abel

Для создания трапеции с закругленными углами в CSS можно использовать свойство border-radius для закругления углов и псевдоэлементы ::before и ::after для создания трапеции.

Вот пример CSS-кода для создания трапеции с закругленными углами:

.trapezoid {
  position: relative;
  width: 200px;
  height: 100px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.trapezoid::before,
.trapezoid::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50px;
  height: 20px;
  border-radius: 10px;
}

.trapezoid::before {
  left: 0;
  transform: skew(-30deg);
  background-color: #ccc;
}

.trapezoid::after {
  right: 0;
  transform: skew(30deg);
  background-color: #ccc;
}

В этом примере мы используем свойство border-radius, чтобы закруглить нижние углы трапеции. Затем мы создаем псевдоэлементы ::before и ::after и позиционируем их внизу трапеции. Далее мы используем свойство transform для наклона псевдоэлементов и создания формы трапеции. И, наконец, мы устанавливаем цвет фона для псевдоэлементов.

Этот код создает трапецию с закругленными углами, как показано на изображении ниже:

Trapezoid with rounded corners

0 | 0

Как сделать трапеция с закругленными углами в CSS?

2 ответа

Похожие обсуждения: