html - 将聊天箭头从左侧移动到右侧

Question

我正在使用来自 JSFiddle 的这个片段 我无法将箭头从左侧移动到右侧。

我尝试修改 bubble:before，我得到了向右切换的箭头。但我现在遇到了反射(reflect)它的问题!谢谢

Answer 1

这是我的解决方案，

你将不得不改变

 border-right-color: #FFFFCC;

到

 border-left-color: #FFFFCC;

对于之前和之后

也改

右:100% 到左:100%；

对于

 .bubble-r:after,
 .bubble-r:before 

有关 CSS traingle 如何工作的更多信息，请参阅此代码笔动画

Animation to Explain CSS Triangles

.bubble {
  position: relative;
  background: #FFFFCC;
  border: 1px solid #FFCC00;
  max-width: 250px;
  padding: 10px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
}

.bubble:after,
.bubble:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.bubble:after {
  border-color: rgba(255, 255, 204, 0);
  border-right-color: #FFFFCC;
  border-width: 15px;
  margin-top: -15px;
}

.bubble:before {
  border-color: rgba(255, 204, 0, 0);
  border-right-color: #FFCC00;
  border-width: 16px;
  margin-top: -16px;
}

.bubble-r {
  position: relative;
  background: #FFFFCC;
  border: 1px solid #FFCC00;
  max-width: 250px;
  padding: 10px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
}

.bubble-r:after,
.bubble-r:before {
  left: 100%;/*change this from right to left*/
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.bubble-r:after {
  border-color: rgba(255, 255, 204, 0);
  border-left-color: #FFFFCC;/*change this from right to left */
  border-width: 15px;
  margin-top: -15px;
}

.bubble-r:before {
  border-color: rgba(255, 204, 0, 0);
  border-left-color: #FFCC00;/*change this from right to left*/
  border-width: 16px;
  margin-top: -16px;
}

<div class="bubble">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna ornare, ullamcorper mi et, eleifend nunc.<br><br>Maecenas rutrum metus vitae ipsum porttitor finibus.
</div>
<br/>

<div class="bubble-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna ornare, ullamcorper mi et, eleifend nunc.<br><br>Maecenas rutrum metus vitae ipsum porttitor finibus.
</div>