Речевой пузырь на чистом CSS с полупрозрачным фоном и рамкой. ⇐ CSS

[Anonymous]

Я хотел бы создать всплывающее окно с помощью чистого CSS.
У меня есть несколько требований:

• < li>Он должен масштабироваться либо в соответствии с содержимым + некоторые отступы, либо в соответствии с предпочтительным размером.
• Цвет фона должен быть полупрозрачным.
• Вы должны иметь возможность установить границу с собственным уровнем прозрачности.
• Вы должны иметь возможность установить радиус границы, которого придерживаются как граница, так и фон.

Вот пример того, как, по моему мнению, будут выглядеть два таких речевых пузыря: первый имеет предпочтительные параметры и высоту и центрирует содержимое, второй соответствует высоте и ширина содержимого с некоторым дополнением. Я думаю, что решающим моментом здесь является то, что в обоих случаях маленький заостренный треугольник остается одинакового размера и центрируется.
[img]https://i.stack.imgur .com/363Zq.jpg[/img]

Я пробовал искать различные подходы к речевым пузырям и пытался адаптировать примеры, такие как № 34 в списке:

Код: Выделить всё

/* HTML: This is a Tooltip with a border and a border radius. Border can have a solid or gradient coloration and the background is transparent */
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
background-color: #ff000055;
border-radius: 25px;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */

--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 7px; /* border width */
--r: 1.2em; /* the radius */

padding: 1em;
color: #415462;
position: relative;
z-index: 0;
}
.tooltip:before,
.tooltip:after {
content: '';
position: absolute;
z-index: -1;
inset: 0;
background: conic-gradient(#4ecdc4 33%, #fa2a00 0 66%, #cf9d38 0); /* your coloration */
--_p: clamp(
var(--h) * tan(var(--a) / 2) + var(--b),
var(--p),
100% - var(--h) * tan(var(--a) / 2) - var(--b)
);
}
.tooltip:before {
padding: var(--b);
border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2))
min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) / var(--r);
background-size: 100% calc(100% + var(--h));
clip-path: polygon(
0 100%,
0 0,
100% 0,
100% 100%,
calc(var(--_p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4)) 100%,
calc(var(--_p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4))
calc(100% - var(--b)),
calc(var(--_p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4))
calc(100% - var(--b)),
calc(var(--_p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4)) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.tooltip:after {
bottom: calc(-1 * var(--h));
clip-path: polygon(
calc(var(--_p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
var(--_p) 100%,
calc(var(--_p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
calc(var(--_p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4))
calc(100% - var(--h) - var(--b)),
var(--_p) calc(100% - var(--b) / sin(var(--a) / 2)),
calc(var(--_p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4))
calc(100% - var(--h) - var(--b))
);
}

Но установка полупрозрачного цвета фона (и радиуса границы, чтобы скрыть переполнение за границей) не заполняет маленький треугольник внизу. Я также не смог найти способ сделать это.
Я также нашел здесь похожий вопрос, который предлагает подход, который я адаптировал к приведенному ниже коду.

Код: Выделить всё

Hello world! I am some content.  Who's got time for lorems?

Код: Выделить всё

.background {
background: pink;
display: flex;
width: 100%;
height: 100vh;
}

.bubble {
height: fit-content;
color: red;
max-width: 75%;
min-width: 200px;
padding: 8px 12px 0 12px;
position: relative;
border-radius: 0 0 4px 4px;
margin-top:40px;
border: 1px solid red;
border-top:0;
margin-right: 16px;
background: #0000bb55;
}

.bubble::before,
.bubble::after{

content: '';
position: absolute;
width: 70%;
height: 20px;
top: -21px;
border:1px solid;
background: #0000bb55;
}
.bubble::before {
right:-1px;
border:1px solid;
border-width:1px 1px 0 0;
transform-origin:bottom;
transform:skew(-45deg);
}
.bubble::after{
left:-1px;
border-width:1px 0 0 1px;
border-radius:4px 0 0 0;
}

p {
margin-top:0;
}

Но как только вы начнете добавлять полупрозрачные цвета, эти искаженные преобразования начнут перекрываться и приводить к несоответствию цветов.


Наконец, ответы в этом посте также имеют разные уровни непрозрачности для треугольника и фона:

Код: Выделить всё

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Код: Выделить всё

.wrapper {
background: pink;
height: 500px;
width: 100vw;
}

.infoBubble {
font-family:arial;
font-size:12px;
color:#FFFFFF;
display: inline-block;
position: absolute;
padding:6px;
background-color: rgba(0, 0, 0, 0.7);
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
}

.infoBubble:after {
content:"";
position:absolute;
bottom:-6px;
left:20px;
opacity:0.7;
border-width:6px 6px 0;
border-style:solid;
border-color: rgba(0, 0, 0, 0.7) transparent;
display:block;
width:0;
}

Итак, мне интересно... каков правильный подход? здесь?

Подробнее здесь: https://stackoverflow.com/questions/782 ... d-a-border