我阅读了很多有关 Chat Bubble 渐变背景的文章，但找不到任何文章来解决我的问题。这是我需要制作的渐变聊天气泡:https://i.imgur.com/pPuch2i.png
最佳答案
以下是使用 HTML 和 CSS 实现此结果的方法:
.bubble {
background : linear-gradient(to right, #67b04e , #40bede);
padding: 20px;
position: relative;
font-family: sans-serif;
letter-spacing: 0.8px;
color: #fff;
line-height: 20px;
width: 100%;
-webkit-clip-path: polygon(100% 0, 100% 92%, 74% 92%, 70% 100%, 66% 92%, 0 92%, 0 0);
clip-path: polygon(100% 0, 100% 92%, 74% 92%, 70% 100%, 66% 92%, 0 92%, 0 0);
}
body {
padding: 50px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="bubble">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
----------
</div>
</body>
</html>关于html - 聊天气泡的渐变背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46066644/