CSS border triangle point right

This question already has an answer here:

How do CSS triangles work? 18 answers

---

You can use a pseudo element for this, and position it to the right.

Using this design, you can create a border on the far right of the main 'div' element.

The main thing to notice here is the use of a pseudo element. Once the 'parent' gets positioned relatively, you can align the pseudo element absolutely in order for the positioning to occur.

Please Kindly note

---

This is not a bug. Follow the link web-tiki has given, and you might get a better understanding of the 'triangle'. In my answer, note how I've set border- left , and how this 'mirrors' how you've used border right. Notice also that my pseudo element has no height or width set (again, explained in 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>

链接地址: http://www.djcxy.com/p/89490.html

上一篇: 在CSS中绘制三角形

下一篇: CSS边界三角点正确