Переместить стрелку чата с левой стороны на правую

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, обратитесь к этой анимации кода

Анимация для объяснения треугольников 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>