Как сделать изогнутый треугольный речевой пузырь с псевдоэлементами?

Question

Привет всем Я пытаюсь сделать изогнутый треугольник речи пузырь с CSS ::after псевдоэлемент.

Я создал, как этот DEMO:

.test 
{ 
position: relative; 
width: 430px; 
height: 175px; 
padding: 0px; 
background: #FFFFFF; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
border-radius: 6px; 
} 

.test:after 
{ 
content: ''; 
position: absolute; 
border-style: solid; 
border-width: 14px 14px 0; 
border-color: #FFFFFF transparent; 
display: block; 
width: 0; 
z-index: 1; 
bottom: -14px; 
left: 8px; 
} 

Как сделать, как на картинке?

Answer 1

можно использовать элементы псевдо (и их фокусы), чтобы генерировать нечто подобное к этому:

---

div { 
 
    height: 200px; 
 
    width: 350px; 
 
    background: tomato; 
 
    margin: 50px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 40px; 
 
    width: 40px; 
 
    background: tomato; 
 
    bottom: 2%; 
 
    left: -15px; 
 
    border-radius: 0 0 100% 0; 
 
    -webkit-transform: rotate(35deg); 
 
    transform: rotate(35deg); 
 
} 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 40px; 
 
    width: 10px; 
 
    background: white; 
 
    bottom: 7%; 
 
    left: -18px; 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(35deg); 
 
    transform: rotate(35deg); 
 
}

<div>Hello world</div>

---

.test { 
 
    height: 200px; 
 
    width: 350px; 
 
    background: tomato; 
 
    border-radius: 5px; 
 
    position: relative; 
 
    margin: 20px; 
 
} 
 
.test:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 20px; 
 
    width: 20px; 
 
    background: tomato; 
 
    bottom: 20px; 
 
    left: -6px; 
 
    transform-origin: center center; 
 
    transform: rotate(30deg); 
 
    border-radius: 0 0 100% 0; 
 
} 
 
.test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 20px; 
 
    width: 10px; 
 
    background: white; 
 
    bottom: 24px; 
 
    left: -11px; 
 
    border-radius: 50%; 
 
    transform-origin: center center; 
 
    transform: rotate(30deg); 
 
} 
 
.zoom { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    position: relative; 
 
    border-radius: 0 0 100% 0; 
 
    transform-origin:center center; 
 
    transform: rotate(45deg); 
 
    margin-top:50px; 
 
} 
 
.zoom:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 50%; 
 
    background: white; 
 
    border-radius: 50%; 
 
    left: -25%; top: 0; 
 
}

<div class="test">hello world</div> 
 

 
<hr/> 
 

 
<div class="zoom"></div>

---

протестирован в Chrome, IE и Firefox (последние версии)

Answer 2

Пытаясь достичь этой изогнутой формы треугольника с чистым CSS может быть очень сложно, так что я бы предложил вместо того, чтобы создать эту форму в векторном формате, сохранить его как SVG и использовать это в вашем :after элемент.

Конечно, сохраните резервную копию PNG для браузеров, которые также не поддерживают SVG.

Как уже упоминалось, простое изменение CSS-предложений приведет к получению вашего элемента :after в нижнем левом углу, но SVG может быть вашим единственным вариантом для получения изогнутой формы треугольника.

Answer 3

Чтобы переместить стрелку влево, просто измените положение псевдоэлемента и границ. Однако в это время я не думаю, что можно создать вогнутую кривую, не вводя более сложную процедуру, такую ​​как обтравочные маски. Было бы проще создать .png изображение изогнутого треугольника в Photoshop или Illustrator, а затем поместить его рядом с пузырьком речи по желанию.

CodePen Example

HTML:

<div class="container"> 
    <div class="test"></div> 
</div> 

CSS:

body{ 
    background-color:#000; 
} 
.container { 
    margin:0px auto; 
    width:500px; 
    margin-top:50px; 
} 
.test 
{ 
    position: relative; 
    width: 430px; 
    height: 175px; 
    padding: 0px; 
    background: #FFFFFF; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
} 

.test:after 
{ 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    border-width: 0px 0px 15px 16px; 
    border-color: #FFFFFF transparent; 
    display: block; 
    width: 0; 
    z-index: 1; 
    bottom: 4px; 
    left: -15px; 
} 

Answer 4

Кажется, вы просто расположив его в нижней части, а не слева ...

.test:after { 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    border-width: 0 0 14px 14px; 
    border-color: #FFFFFF transparent; 
    display: block; 
    width: 0; 
    z-index: 1; 
    bottom: 4px; 
    left: -14px; 
} 

Однако это не будет точно воспроизводить изображение, которое вместо этого показывает кривую. Хотя вы, вероятно, могли бы воспроизвести эту кривую только с кучей умных приграничных трюков, было бы гораздо разумнее использовать изображение.

Answer 5

Просто еще вешать, так что вы можете выбрать

.test:after { 
    content: ''; 
    position: absolute; 
    border: 0px solid; 
    display: block; 
    width: 0; 
    z-index: -1; 
    bottom: 30px; 
    left: -13px; 
    width: 40px; 
    height: 40px; 
    background-color: transparent; 
    border-bottom-left-radius: 50%; 
    border-bottom-right-radius: 50%; 
    box-shadow: 14px 10px 0px 10px white; 
} 

codepen