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

226

16 апреля 2019, 02:20

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

Answer 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%); 
}

<div class="tip" contenteditable>Здесь можно редактировать текст, для проверки адаптивности. Все пропорции оригинала учтены. Проблема одна - нельзя сделать фон прозрачным.</div>

Update

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

Answer 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; 
}