Трансформация фигуры - одной стороны

#html #css

Как сделать такую фигуру. По сути, это просто прямоугольник, с не много трансформированной
стороной + скругления
    

Ответы

Ответ 1

body {
  background: linear-gradient( rgba(255, 255, 255, 0) .9em, rgba(0, 0, 250, .15)
1em) 0 0, linear-gradient(90deg, rgba(255, 255, 255, 0) .9em, rgba(0, 0, 250, .15)
1em) 0 0;
  background-size: 1em 1em;
  background-color: #fff;
}

.tip {
  position: relative;
  display: inline-block;
  min-width: 115px;
  margin: 37px 0;
  padding: 0px 7px 7px;
  box-sizing: border-box;
  border-radius: 0px 0px 7px 7px;
  border: 3px solid #090;
  border-top: none;
  text-align: justify;
  background-color: #fff;
  outline: none;
}

.tip:before {
  content: '';
  position: absolute;
  top: -24px;
  left: -3px;
  width: calc(100% + 6px);
  height: 40px;
  border: 3px solid #090;
  border-bottom: none;
  border-radius: 7px 7px 0px 0px;
  box-sizing: border-box;
  transform: skewY(-2.4deg);
  background-image: linear-gradient(-177.6deg, #fff 55%, transparent 55%);
  pointer-events: none;
}

.tip:after {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 27px;
  width: 52px;
  height: 32px;
  border: 3px solid #090;
  border-top: none;
  border-right: none;
  border-radius: 0px 0px 0px 0px;
  box-sizing: border-box;
  transform: skewY(-31.4deg);
  background-image: linear-gradient(31.4deg, #fff 51%, transparent 51%);
}
Здесь можно редактировать текст, для проверки адаптивности.
Все пропорции оригинала учтены. Проблема одна - нельзя сделать фон прозрачным.




Update

Связанный пример: адаптивные тултипы с прозрачным фоном


Ответ 2

Основу для такой фигуры без трансформации можно сделать тут. После поправить немного
стили для позиционирования треугольника внизу, отступов внутри фигуры и добавить css
трансформацию transform: perspective(600px) rotateX(5deg) rotateY(-45deg);.



body {
    background: #00aabb;
}

.speech-bubble {
    margin: 20px;
    background: #ffffff;
    border-radius: 0.4em;
    width: 300px;
    height: 100px;
    transform: perspective(600px) rotateX(5deg) rotateY(-45deg);
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 0;
    height: 0;
    border: 39px solid transparent;
    border-top-color: #ffffff;
    border-bottom: 0;
    border-left: 0;
    margin-left: -19.5px;
    margin-bottom: -39px;
}





Сodepen