ボックスの右側に矢印が必要

Question

divの右側に矢印が必要ですが、これは機能しません。ここで

はフィドルです：

https://jsfiddle.net/azb5m3r2/2/

矢印が正しくdiv要素の左側に表示されますが、私はそれが右側（反対側）に表示します。

body { 
 
    font-family: Helvetica; 
 
    font-size: 13px; 
 
} 
 
div.callout { 
 
    height: 20px; 
 
    width: 130px; 
 
    /*float: left;*/ 
 
    z-index: 1; 
 
} 
 
div.callout { 
 
    background-color: #444; 
 
    background-image: -moz-linear-gradient(top, #444, #444); 
 
    position: relative; 
 
    color: #ccc; 
 
    padding: 20px; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 0px 20px #999; 
 
    //margin: 25px; 
 
    min-height: 20px; 
 
    border: 1px solid #333; 
 
    text-shadow: 0 0 1px #000; 
 
    /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/ 
 
} 
 
.callout::before { 
 
    content: ""; 
 
    width: 0px; 
 
    height: 0px; 
 
    border: 0.8em solid transparent; 
 
    position: absolute; 
 
} 
 
.callout.top::before { 
 
    left: 0%; 
 
    bottom: -20px; 
 
    border-top: 11px solid #444; 
 
} 
 
.callout.bottom::before { 
 
    left: 45%; 
 
    top: -20px; 
 
    border-bottom: 10px solid #444; 
 
} 
 
.callout.right::before { 
 
    left: -20px; 
 
    top: 40%; 
 
    border-right: 10px solid #444; 
 
} 
 
/*  .callout.left::after { 
 
       right: -20px; 
 
       top: 40%; 
 
       border-left: 10px solid #444; 
 
      } 
 
      */ 
 

 
.callout.left:after { 
 
    right: -20px; 
 
    top: 40%; 
 
    border-left: 10px solid #444; 
 
}

<div class="callout left">test</div>

これは、左側に働く

<div class="callout right">test</div> 

Answer 1

callout.leftあなたが.callout::beforeスタイルを与えると同じ::before、ない::afterまたは:after、でなければなりません。

コードは、これに代えて、この

.callout.left::before { 
    right: -20px; 
    top: 40%; 
    border-left: 10px solid #444; 
} 

Answer 2

が好きでなければならない：

.callout.left::after { 
    right: -20px; 
    top: 40%; 
    border-left: 10px solid #444; 
} 

使用この：完全に中央の矢印のため

.callout.left::before { 
    right: -20px; 
    top: 40%; 
    border-left: 10px solid #444; 
} 

そして、必要に応じて、使用this：

01センタリング技法の説明については

.callout.left::before { 
    right: -20px; 
    top: 50%; 
    transform: translateY(-50%); 
    border-left: 10px solid #444; 
} 

revised fiddle

、この記事を参照してください。** https://jsfiddle.net/razia/peeq2aam/Element will not stay centered, especially when re-sizing screen

Answer 3

---

#right { 
background-color: #333; 
height: 60px; 
position: relative; 
width: 150px; 
border-radius:5px; 
float:right; 
font-family:Helvetica; 
color:#FFF; 
text-align:center; 
line-height:55px; 
} 

#right:after { 
content: ' '; 
height: 0; 
position: absolute; 
width: 0; 
border: 10px solid transparent; 
border-top-color: #333; 
top: 100%; 
left: 50%; 
margin-left: -10px; 
} 

**** 

<div id="right">test</div> 

を*

あなたがより一層たい場合はチェックしてくださいこのリンク： - http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/