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

Question

Подскажите пожалуйста как сделать такую трапецию? Спасибо

Answer 1

Чтобы задать форму можно использовать clip-path: polygon, но вот как сделать корректные кругления - увы не знаю

А вообще если бы у меня была такая задача, то воспользовался бы SVG

Подробнее - https://ru.stackoverflow.com/questions/1250120/Как-сделать-шестиугольник-с-закругленными-краями-с-помощью-css

Есть ещё такое решение - https://codepen.io/Grilly86/pen/gWodKV

Answer 2

На css такой вариант.. Лучше конечно SVG использовать.

.decor {
  width: 250px;
  height: 90px;
  background: #9732CC;
  border-radius: 0px 20px 20px 0px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.scroller {
  scrollbar-width: none;  /*скрыть scroll в fireFox*/
}

.scroller::-webkit-scrollbar {
  width: .7em;
  /* width: 0; /*скрыть scroll*\/ */
}

.scroller::-webkit-scrollbar-track {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.scroller::-webkit-scrollbar-thumb {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

#boxContent {
  z-index: 1;
  width: 278px;
  height: 80px;
  margin-top: 5px;
  margin-left: -17px;
  clip-path: polygon(7% 0%, 100% 0, 100% 100%, 0 100%);
  border-radius: 20px 20px 20px 20px;
  box-sizing: border-box;
  padding-left: 20px;
  word-break: break-word;
  overflow-y: scroll;
  text-align: center;
}

#box::before {
  content: '';
  position: absolute;
  height: 90px;
  width: 35px;
  margin-left: -25px;
  background: #9732CC;
  border-radius: 20px 0px 0px 20px;
  transform: skew(-10deg);
}

<div id="boxContent" class="decor scroller">Lorem r sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exemco laboris nisi ut aliquip Lorem r sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exemco laboris nisi ut aliquip</div>
<div id="box" class="decor"></div>

БЛОГ НА HUSL

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

Ответы (2 шт):