Как сделать такую фигуру. По сути, это просто прямоугольник, с не много трансформированной стороной + скругления
-
1А может не мудрить и сделать svg?– Qwertiy ♦Commented 12 нояб. 2018 в 20:12
-
Да так пока что и сделал. Кинул фоном СВГ. Но это не самый лучший вариант для адаптации. Как по мне...– Юрий КопотьCommented 12 нояб. 2018 в 20:16
-
@ЮрийКопоть а какой вариант Вас устроил бы, чистый CSS ?– UModeLCommented 12 нояб. 2018 в 20:17
-
да любой. Что бы не было проблем с адаптацией и наполнение разного текста. Я с такой фигурой первый раз столкнулся и понял, что не могу придумать как сделать её универсальной (растяжение по высоте и ширине без пропорций)– Юрий КопотьCommented 12 нояб. 2018 в 20:19
-
@ЮрийКопоть, а если border-image?– Qwertiy ♦Commented 12 нояб. 2018 в 20:40
|
Показать ещё 1 комментарий
2 ответа
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
Связанный пример: адаптивные тултипы с прозрачным фоном
-
1
-
@Alexandr_TT спасибо. Покажите, где я промахнулся? Может от браузера зависит (тестировал на Win7+Chrome70)?– UModeLCommented 13 нояб. 2018 в 8:58
-
@UModeL ваш ответ лучший. Адаптивен при добавлении текста и изменении размера окна браузера! Commented 14 нояб. 2018 в 5:12
Основу для такой фигуры без трансформации можно сделать тут. После поправить немного стили для позиционирования треугольника внизу, отступов внутри фигуры и добавить 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>
-
не совсем то что нужно. Тут идут на скос две стороны. А нужно, только верхняя Commented 12 нояб. 2018 в 20:13
-
По картинке не совсем было видно, а скругление обязательно? Commented 12 нояб. 2018 в 20:21
-
-
Готово, если нужен будет текст внутри, то его без проблем можно повернуть обратной трансформацией Commented 12 нояб. 2018 в 20:57
-
ну не совсем. попробуйте поиграться с размерами (адаптация) Commented 12 нояб. 2018 в 21:08