Question

我读了很多关于聊天泡泡的渐变背景，但我找不到任何文章来解决我的问题。这是我需要制作的渐变聊天泡泡：https://i.imgur.com/pPuch2i.png

Answer 1

以下是使用HTML和CSS实现此结果的方法：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

获得完全正确是非常棘手的，但这是我的尝试。

关于to bottom right的部分应该足够简单 - 它显示了元素颜色变化的方向。然后你需要得到左上角和右下角的颜色。然后，为了使它更接近你拥有的图像，你也可以添加50％的标记颜色。

.bubble {
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom right, #67b04d 0%, #54b796 50%, #a1d9e8 100%);
}

<div class="bubble">

</div>

Answer 3

gradient使用渐变左

检查https://jsfiddle.net/z1qxtqok/1/

background: linear-gradient(left,#67b04f , #40bede);

聊天泡泡的渐变背景

3 个答案: