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

Question

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

我尝试修改bubble:before，我得到了向右切换的箭头。但我现在有问题反映它！谢谢

Answer 1

这是我的解决方案，

你将不得不改变

 border-right-color: #FFFFCC;

至

 border-left-color: #FFFFCC;

为了before and after

也改变

右：100% 向左：100%；

为了

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

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

动画解释 CSS 三角形

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