4

Прямоугольник

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

Nikita Rogatnev
  • 1,663
Юрий Копоть
  • 2,429
  • 10
  • 14
  • 1
    А может не мудрить и сделать svg? – Qwertiy Nov 12 '18 at 20:12
  • Да так пока что и сделал. Кинул фоном СВГ. Но это не самый лучший вариант для адаптации. Как по мне... – Юрий Копоть Nov 12 '18 at 20:16
  • @ЮрийКопоть а какой вариант Вас устроил бы, чистый CSS ? – UModeL Nov 12 '18 at 20:17
  • да любой. Что бы не было проблем с адаптацией и наполнение разного текста. Я с такой фигурой первый раз столкнулся и понял, что не могу придумать как сделать её универсальной (растяжение по высоте и ширине без пропорций) – Юрий Копоть Nov 12 '18 at 20:19
  • @ЮрийКопоть, а если border-image? – Qwertiy Nov 12 '18 at 20:40
  • Всё равно же вопрос адаптации стоит.... Решил сделать svg на фон. – Юрий Копоть Nov 12 '18 at 20:49

2 Answers2

4

Основу для такой фигуры без трансформации можно сделать тут. После поправить немного стили для позиционирования треугольника внизу, отступов внутри фигуры и добавить 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;
}
<div class="speech-bubble"></div>

Сodepen

Nikita Rogatnev
  • 1,663
4

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

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

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
UModeL
  • 34,026
  • 6
  • 29
  • 71
  • 1
    https://codepen.io/anon/pen/WYRvzQ - чуток подправил – Юрий Копоть Nov 13 '18 at 07:51
  • @Alexandr_TT спасибо. Покажите, где я промахнулся? Может от браузера зависит (тестировал на Win7+Chrome70)? – UModeL Nov 13 '18 at 08:58
  • @UModeL ваш ответ лучший. Адаптивен при добавлении текста и изменении размера окна браузера! – Alexandr_TT Nov 14 '18 at 05:12