Добавить треугольник polygon svg через style css
g {
fill: #fdd;
transition: 500ms;
}
g:hover {
fill: wheat;
}
text {
pointer-events: none;
}
.pol{
clip-path: polygon(270px 60px, 250px 80px, 285px 95px);
}<svg>
<defs>
<filter id="shadow" x=-50% y=-50% width=200% height=200%>
<feDropShadow dx="5" dy="5" stdDeviation="5"
flood-color="#333" flood-opacity=".1" />
</filter>
</defs>
<g>
<rect filter="url(#shadow)"
x="10" y="10" width="270" height="70" rx="25" />
<polygon points="270 60 250 80 285 95" />
</g>
<text x="140" y="50" text-anchor="middle">example text</text>
</svg>
<svg>
<defs>
<filter id="shadow" x=-50% y=-50% width=200% height=200%>
<feDropShadow dx="5" dy="5" stdDeviation="5"
flood-color="#333" flood-opacity=".1" />
</filter>
</defs>
<g>
<rect filter="url(#shadow)"
x="10" y="10" width="270" height="70" rx="25" />
<polygon class="pol" />
</g>
<text x="140" y="50" text-anchor="middle">Пример с clip-path</text>
</svg>Делаю через стиль меняя эту строчку <polygon points="270 60 250 80 285 95" /> на эту <polygon class="pol" /> но не выходит
Ответы (2 шт):
Автор решения: Alexandr_TT
→ Ссылка
Для изменения контура тултипа можно попробовать использовать анимацию атрибута d path
В основе анимации лежит плавный переход из начального path овала без стрелки к финальному path со стрелкой.
По наведению курсора меняется цвет тултипа и при клике вырастает стрелка.
При повторном клике стрелка плавно исчезает.
var tooltip = document.getElementById("svg1"),
close = document.getElementById('close'),
open = document.getElementById("open");
let flag = true;
tooltip.addEventListener('click', function() {
if (flag == true) {
close.beginElement();
flag = false;
} else {
open.beginElement();
flag = true;
}
});.pol {
fill: #fdd;
stroke-width:2;
stroke:#000"
transition: 500ms;
filter:url(#shadow);
}
:hover.pol {
fill: wheat;
}
text {
font-size:24px;
fill:#7A7A7A;
pointer-events: none;
text-anchor:middle;
}<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100" viewBox="0 0 300 100" >
<defs>
<filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="3" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path class="pol" d="m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z">
<animate id="close"
attributeName="d"
begin="indefinite"
restart="whenNotActive"
dur="0.5s"
fill="freeze"
values="
m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z;
m35 10h220c13.9 0 21.9 11.2 25 25 0 0-0.2 16.3 0 29.4C280.9 132.2 282.9 79.8 255 80 192.3 80.4 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z" />
<animate id="open"
attributeName="d"
begin="indefinite"
restart="whenNotActive"
dur="0.5s"
fill="freeze"
values="
m35 10h220c13.9 0 21.9 11.2 25 25 0 0-0.2 16.3 0 29.4C280.9 132.2 282.9 79.8 255 80 192.3 80.4 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z;
m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z"
/>
</path>
<text x="140" y="50">Пример с clip-path</text>
</svg>Можно попробовать использовать более интересную форму тултипа
.container {
width:75vw;
height:75vh;
}<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 240 240">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="3" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#shadow)" transform="scale(1)">
<path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
<animate id="an_path"
attributeName="d"
values="
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"
begin="svg1.click"
dur="6s"
repeatCount="1"
fill="freeze"
restart="whenNotActive">
</animate>
</path>
<text x="30" y="50" font-size="18" fill="white">click me </text>
</g>
</svg>
</div>
Автор решения: Sevastopol'
→ Ссылка
Вариант CSS. Ответ не совсем по теме, но возможно кому-то пригодится.
.block {
position: relative;
max-width: 200px; min-height: 40px;
border-radius: 30px;
padding: 20px;
background: #ffdddd; box-shadow: 3px 10px 5px 0px rgba(50, 50, 50, 0.05);
}
.block::after {
content: ''; position: absolute;
bottom: 2px; right: 15px; width: 80px; height: 100px;
border-radius: 20px 0px 5px 0px;
transform: skew(30deg, 30deg) rotate(0deg);
background: linear-gradient(135deg, transparent 50%, #ffdddd 50%);
}<div class="block"></div>В качестве бонуса плюс небольшая динамика носика =)
.block {
position: relative;
max-width: 200px; min-height: 40px;
border-radius: 30px;
padding: 20px;
background: #ffdddd; box-shadow: 3px 10px 5px 0px rgba(50, 50, 50, 0.05);
}
.block::after {
content: ''; position: absolute;
bottom: 2px; right: 15px; width: 0px; height: 0px;
border-radius: 20px 0px 5px 0px;
transform: skew(30deg, 30deg) rotate(0deg);
background: linear-gradient(135deg, transparent 50%, #ffdddd 50%);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.block:hover::after {
width: 80px; height: 100px;
}<div class="block"></div>