CSS边框三角形点正确

Question

所以我的边框是一个左边的三角形，我怎么会把它转过来让它指向右边但是保持在同一个位置？

CSS

content: '';
position: relative;
display: block;
height: 0;
border: 19px solid #f2f2f2;
/* border-left-color: transparent; */
border-right-color: rgba(200, 120, 120, 0.66);

当前

Answer 1

您可以为此使用伪元素，并将其置于右侧。

使用此设计，您可以在主“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>