html - 如何仅使用 css 在 iphone 经典风格中设置聊天气泡的样式

Question

我试图创建一个 html 页面，它看起来类似于我们的 android 和 iphone 设备中的消息(线程 View )。

这是我写的代码

CSS 样式:

<style type='text/css'>
.triangle-right 
 {  
        position:relative;   
        padding:15px;   
        color:#fff;   
        background:#075698;   
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));   background:-moz-linear-gradient(#2e88c4, #075698);   
        background:-o-linear-gradient(#2e88c4, #075698);   
        background:linear-gradient(#2e88c4, #075698);   
        -webkit-border-radius:10px;   
        -moz-border-radius:10px;   
        border-radius:10px;   
 }   
 .triangle-right.top   
 {     
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));   
    background:-moz-linear-gradient(#075698, #2e88c4);   
    background:-o-linear-gradient(#075698, #2e88c4);   
    background:linear-gradient(#075698, #2e88c4);   
 }   
 .triangle-right.left   
     {   
            margin-left:10px;background:#075698;   
     }   
     .triangle-right.right   
     {   
        margin-right:10px;  background:#075698;   
     }   
     .triangle-right:after    
     {   
     content:'';   
         position:absolute;   
         bottom:-20px;left:50px;border-width:20px 0 0 20px;border-style:solid;border-color:#075698 transparent; display:block;width:0;   
     }   
     .triangle-right.top:after    
     {   
        top:-20px;right:50px;bottom:auto;left:auto;border-width:20px 20px 0 0;border-color:transparent #075698;    
     }   
 .triangle-right.left:after    
     {   
        top:16px;left:-15px;    bottom:auto;border-width:0 15px 15px 0;border-color:transparent #E8E177;   
     }   
     .triangle-right.right:after   
     {   
        top:16px;right:-15px;bottom:auto;left:auto;border-width:0 0 15px 15px; border-color:transparent #8EC3E2 ;   
 }  
.triangle 
{
width: 0;
height: 0;
    border-left: 50px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 50px solid #fc2e5a;
}

我尝试改变一些值

     .triangle-right.left:after    
     {   
        top:16px;left:-15px;    bottom:auto;border-width:0 15px 15px 0;border-color:transparent #E8E177;   
     }   
     .triangle-right.right:after   
     {   
        top:16px;right:-15px;bottom:auto;left:auto;border-width:0 0 15px 15px; border-color:transparent #8EC3E2 ;   
 } 

但没有得到所需的确切形状。 我需要按照以下方式构建气泡

谁能帮帮我

Answer 1

HTML

<div class="chat">
  <div class="yours messages">
    <div class="message last">
      Hello, how's it going?
    </div>
  </div>
  <div class="mine messages">
    <div class="message">
      Great thanks!
    </div> 
    <div class="message last">
      How about you?
     </div>
  </div>
</div>

CSS

body {
  font-family: helvetica;
  display: flex ;
  flex-direction: column;
  align-items: center;
}

.chat {
  width: 300px;
  border: solid 1px #EEE;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.messages {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.message {
  border-radius: 20px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.yours {
  align-items: flex-start;
}

.yours .message {
  margin-right: 25%;
  background-color: #EEE;
  position: relative;
}

.yours .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  background: #EEE;
  border-bottom-right-radius: 15px;
}
.yours .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
}

.mine {
  align-items: flex-end;
}

.mine .message {
  color: white;
  margin-left: 25%;
  background: rgb(0, 120, 254);
  position: relative;
}

.mine .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  background: rgb(0, 120, 254);
  border-bottom-left-radius: 15px;
}

.mine .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
}

https://codepen.io/swards/pen/gxQmbj