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训练器如何工作的更多信息，请参考此Codepen动画

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>

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

1 个答案: