我希望有人能帮我找到一种优美的方式，在CSS箭头边框上加边框。
我正在尝试创建这个：
HTML
<div class="message-container customer">
<p class="message">Great thanks</p>
</div>
CSS（层叠样式表）
.message {
width: auto;
max-width: 66%;
padding: 12px 30px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
margin: 4px 0 0 0;
position: relative;
float: right;
border-right: 4px solid #0892cb;
border-radius: 5px 0 0 5px;
}
.message:after {
top: 100%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #FFFFFF;
border-width: 10px;
margin-right: -14px;
margin-top: -10px;
transform: rotate(45deg);
box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
}
这里有一个工作中的JS fiddle https://jsfiddle.net/kdeo3wpg/
正如您所看到的，我在主消息右侧有一个蓝色边框，但是我无法找到在箭头上也显示蓝色边框的方法。如果可能的话，我真的很想避免使用图片。希望能够找到纯CSS的解决方案。
我曾考虑过尝试使用 :before 伪元素，但是我无法获取所需的完全控制权。
任何帮助将不胜感激。
更新
我已经找到了一个解决方案，但说实话，它并不是非常干净。
https://jsfiddle.net/kdeo3wpg/1/
我所做的是添加一个新元素，它是边框的宽度，并具有相同的背景颜色。然后，我将高度设置为略小于CSS箭头的高度。接下来，我给我的新元素一个CSS箭头，其背景颜色为边框的颜色。以下是新代码： HTML
<div class="message-container customer">
<p class="message">
Great thanks
<span class="arrow-border"></span>
</p>
</div>
CSS（层叠样式表）
.message {
width: auto;
max-width: 66%;
padding: 12px 30px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
margin: 4px 0 0 0;
position: relative;
float: right;
border-right: 4px solid #0892cb;
border-radius: 5px 0 0 5px;
}
.message:after {
top: 100%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #FFFFFF;
border-width: 10px;
margin-right: -14px;
margin-top: -10px;
transform: rotate(45deg);
box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
}
.arrow-border {
position: absolute;
background: #0892cb;
width: 4px;
height: 9px;
bottom: -9px;
right: -4px;
z-index: 1;
}
.arrow-border:after {
top: 100%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #0892cb;
border-width: 3px;
margin-right: -3px;
margin-top: -3px;
transform: rotate(45deg);
box-shadow: 0 2px 0 2px rgba(177, 177, 177, .07), 0 2px 0 0 rgba(0, 0, 0, .1);
}
虽然这个解决方案可行，但我觉得可能还有更好、更干净的选项，因此我仍然愿意听取建议。