0

So i have a border that is a triangle pointing left, how would i turn this so it points right but staying in the same position ?

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);

Current enter image description here

jbutler483
  • 24,074
  • 9
  • 92
  • 145
Beep
  • 2,737
  • 7
  • 36
  • 85
  • 1
    .... depends how you have implemented this. To turn it around is as simple as changing `border-right` to `border-left` the position would depend on the HTML and other CSS for elements its in or around. – Ruddy Mar 04 '15 at 11:20
  • thanks ruddy, but I have done this before and it would apply the style to the left border and I would then need to use positioning to place it in correct position. – Beep Mar 04 '15 at 11:32
  • 2
    If you provide all relevant code (all code to do with that image in your question) we will be able to answer it using your code and better explain it. – Ruddy Mar 04 '15 at 11:34
  • thanks ruddy but the answer bellow fixes the bug – Beep Mar 04 '15 at 11:37
  • 1
    There was no bug, that is just how you should have been doing it from the start. Like I said next time include your code (all relevant) and we can explain it better to you. – Ruddy Mar 04 '15 at 11:38
  • 1
    will do, thanks ruddy – Beep Mar 04 '15 at 12:00

1 Answers1

4

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>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • 1
    @Beep: Please see updated answer. It explains that this isn't actually a bug, but in fact how the 'borders-hack' is ***meant*** to work. And *why you came across this misunderstanding*. Cheers. – jbutler483 Mar 04 '15 at 11:54