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

Главное здесь заметить использование псевдоэлемента. Как только «родитель» позиционируется относительно, вы можете полностью выровнять псевдоэлемент, чтобы происходило позиционирование.

Пожалуйста, обратите внимание

---

Это не ошибка. Следуйте ссылке, которую дал веб-тики, и вы можете лучше понять «треугольник». В моем ответе обратите внимание, как я установил 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>