CSS | divの最後に右向き三角形を追加

-2

divの最後にどのように直面する三角形を追加できますか？ divの内容/サイズをdivの右側に直面する三角形で同じにします。ありがとう。コンテンツボックスの中央にある右矢印についてはCSS | divの最後に右向き三角形を追加

2016-10-18 J Doe

content ►

' < - 多田！ – adeneo

少なくともこれを自分でコード化しようとします。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

@Paulie_Dご回答いただきありがとうございます。残念ながら私が探していた答えはあまりありません。 –

.arrow_box { 
 
    position: relative; 
 
    background: #88b7d5; 
 
    border: 2px solid #c2e1f5; 
 
    height: 40px; 
 
    width: 80px; 
 
} 
 
.arrow_box:after, 
 
.arrow_box:before { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 
.arrow_box:after { 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-left-color: #88b7d5; 
 
    border-width: 10px; 
 
    margin-top: -10px; 
 
} 
 
.arrow_box:before { 
 
    border-color: rgba(194, 225, 245, 0); 
 
    border-left-color: #c2e1f5; 
 
    border-width: 13px; 
 
    margin-top: -13px; 
 
}

<div class="arrow_box"></div>

出典

2016-10-18 20:09:54 aashi

CSS | divの最後に右向き三角形を追加

答えて

関連する問題