CSS边界三角点正确
这个问题在这里已经有了答案：
你可以使用一个伪元素来定位它。
使用这种设计，您可以在主“div”元素的最右侧创建边框。
这里要注意的主要是使用伪元素。 一旦“父”被相对定位，您可以完全对齐伪元素，以便进行定位。
请注意
这不是一个错误。 按照web-tiki给出的链接，你可能会更好地理解“三角形”。 在我的回答，请注意我是如何设置border- 左 ，以及如何您如何使用右边框这个“镜子”。 还要注意我的伪元素没有设置高度或宽度（再次，在链接中解释）。
.this {
display: inline-block;
position: relative; /*This must be declared*/
background: #f2f2f2;
height:30px;
width:120px;
line-height:30px;
text-align:center;
}
.this:before{
content:""; /*must be declared on a pseudo element*/
position:absolute; /*allows positioning using left right top and bottom properties*/
border-left:15px solid rgba(200, 120, 120, 0.66); /*This is your color of the arrow*/
border-top:15px solid transparent; /*half the height*/
border-bottom:15px solid transparent; /*half the height*/
right:0; /*we want it on far right*/
top:0; /*since it's the same height, you can declare this as bottom:0; instead*/
}<div class="this">Some Text</div>