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' 元素的最右侧创建边框。

这里主要要注意的是伪元素的使用。一旦 'parent' 相对定位，您可以绝对对齐伪元素以进行定位。

请注意

这不是一个错误。按照link web-tiki给出的，你可能会对'triangle'有更好的理解。在我的回答中，请注意我如何设置 border-left，以及 'mirrors' 您如何使用 border right。另请注意，我的伪元素 没有设置高度或宽度 （同样，在 link 中有解释）。

.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>

CSS 边框三角形点右

CSS border triangle point right

html

css

border

css-shapes