4

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

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

6
  • 1
    А может не мудрить и сделать svg?
    – Qwertiy
    Commented 12 нояб. 2018 в 20:12
  • Да так пока что и сделал. Кинул фоном СВГ. Но это не самый лучший вариант для адаптации. Как по мне... Commented 12 нояб. 2018 в 20:16
  • @ЮрийКопоть а какой вариант Вас устроил бы, чистый CSS ?
    – UModeL
    Commented 12 нояб. 2018 в 20:17
  • да любой. Что бы не было проблем с адаптацией и наполнение разного текста. Я с такой фигурой первый раз столкнулся и понял, что не могу придумать как сделать её универсальной (растяжение по высоте и ширине без пропорций) Commented 12 нояб. 2018 в 20:19
  • @ЮрийКопоть, а если border-image?
    – Qwertiy
    Commented 12 нояб. 2018 в 20:40

2 ответа 2

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

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

3
  • 1
    codepen.io/anon/pen/WYRvzQ - чуток подправил Commented 13 нояб. 2018 в 7:51
  • @Alexandr_TT спасибо. Покажите, где я промахнулся? Может от браузера зависит (тестировал на Win7+Chrome70)?
    – UModeL
    Commented 13 нояб. 2018 в 8:58
  • @UModeL ваш ответ лучший. Адаптивен при добавлении текста и изменении размера окна браузера! Commented 14 нояб. 2018 в 5:12
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

5
  • не совсем то что нужно. Тут идут на скос две стороны. А нужно, только верхняя Commented 12 нояб. 2018 в 20:13
  • По картинке не совсем было видно, а скругление обязательно? Commented 12 нояб. 2018 в 20:21
  • ага.. Там под дизайн нужно Commented 12 нояб. 2018 в 20:22
  • Готово, если нужен будет текст внутри, то его без проблем можно повернуть обратной трансформацией Commented 12 нояб. 2018 в 20:57
  • ну не совсем. попробуйте поиграться с размерами (адаптация) Commented 12 нояб. 2018 в 21:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.