純粋なCSSのヘルプ

Question

下の画像で問題が説明されています。私はコメントフォームを作成しています。そして、ポインタの矢印をffffffの背景色で作成し、1px aaaaaaとborder bottom fffの境界を作成したいので、コンテナdivに快適に座ってください。

問題はありますか？もし私が私が欲しいものを作ることができれば、私はここで頼むと思った。

ポインタのCSSがある：

div.comment-reply .arrow{ 
border-bottom: 8px solid #888; 
border-left: 6px solid transparent; 
border-right: 6px solid transparent; 
height: 0; 
left: 30px; 
line-height: 0; 
position: absolute; 
top: -8px; 
width: 0; 

} 422 @

Answer 1

。あなたはこのrotateのようなCSSで行うことができます。

css 

#C{ 
    height:200px; 
    width:200px; 
    background:red; 
    border:1px solid #000; 
    position:relative; 
    } 

.arrow{ 
    height: 20px; 
    width: 20px; 
    margin-left:30px; 
    margin-top:-11px; 
    background:red; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    border-right:1px solid #000; 
    border-bottom:1px solid #000; 
    position:absolute; 
    bottom:-10px; 
    left:20px; 
} 

HTMLに使用できる

<div id="C"><span class="arrow"></span></div> 

：後、：代わりにスパンの前に。

<div class="comment"> 
    <div> 
     <p>Here is a comment</p> 
    </div> 
</div> 

：あなたには、いくつかの:beforeと:after魔法を使用して、すなわち、フィルタ

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 

CHECK THIS http://jsfiddle.net/sandeep/Hec3t/7/

Answer 2

を使用することができますIEのため

は、私は次のコードでこれを作成することができました__

.comment div:before { 
    content:""; 
    border:10px solid transparent; 
    border-bottom-color:#ccc; 
    width:0px; 
    height:0px; 
    display:block; 
    position:absolute; 
    top:-10px; 
    left:21px; 
} 
.comment div:after { 
    content:""; 
    border:12px solid transparent; 
    border-bottom-color:#fff; 
    width:0px; 
    height:0px; 
    display:block; 
    position:absolute; 
    top:-10px; 
    left:19px; 
} 
.comment { 
    position:relative; 
    margin:10px; 
    padding:10px; 
} 
.comment div { 
    padding:1em; 
    border:1px solid #ccc; 
} 

これは完璧ではありませんが、矢印を含むために空のタグを使用する必要はありません。

デモ：http://jsfiddle.net/yGsKd/2/