背景の色の表示方向を右から左に変更する

Question

この「上部右上」インジケータを「上部左上」インジケータに変更しようとしています。

.right { 
 
    position: relative; 
 
    background: aqua; 
 
    text-align: right; 
 
    min-width: 45%; 
 
    padding: 10px 15px; 
 
    border-radius: 6px; 
 
    border: 1px solid #ccc; 
 
    float: right; 
 
    right: 20px; 
 
} 
 

 
.right::before { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: -1px; 
 
    right: -10px; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid #ccc; 
 
} 
 

 
.right::after { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: 0px; 
 
    right: -8px; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid aqua; 
 
    clear: both; 
 
}

<div class="right"> 
 
    <span>thanks</span> 
 
</div>

私はCSSで '左' から '右' を変更しようとしました。しかし、運はまだありません。

https://stackoverflow.com/a/36715933/6677650

https://jsfiddle.net/2bekec10/

Answer 1

ただ、セレクタの前と後では右から左に変更します。

.right { 
 
    position: relative; 
 
    background: aqua; 
 
    text-align: right; 
 
    min-width: 45%; 
 
    padding: 10px 15px; 
 
    border-radius: 6px; 
 
    border: 1px solid #ccc; 
 
    float: right; 
 
    right: 20px; 
 
} 
 

 
.right::before { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: -1px; 
 
    left: -10px; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid #ccc; 
 
} 
 

 
.right::after { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: 0px; 
 
    left: -8px; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid aqua; 
 
    clear: both; 
 
}

<div class="right"> 
 
    <span>thanks</span> 
 
</div>

Answer 2

シンプル、ちょうどleftでrightのすべてのインスタンスを置き換えますか？

.left { 
 
    position: relative; 
 
    background: aqua; 
 
    text-align: left; 
 
    min-width: 45%; 
 
    padding: 10px 15px; 
 
    border-radius: 6px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    left: 20px; 
 
} 
 

 
.left::before { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: -1px; 
 
    left: -10px; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid #ccc; 
 
} 
 

 
.left::after { 
 
    content: ''; 
 
    position: absolute; 
 
    visibility: visible; 
 
    top: 0px; 
 
    left: -8px; 
 
    border: 10px solid transparent; 
 
    border-top: 10px solid aqua; 
 
    clear: both; 
 
}

<div class="left"> 
 
    <span>thanks</span> 
 
</div>