纯css箭头帮助

Question

下图描述了该问题。我正在创建我们的评论表单。并希望创建ffffff背景颜色的指针箭头，以及1px aaaaaa和边框底部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;

}

Answer 1

@ 422;你可以使用这个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>

你可以使用：after，：before而不是span。

对于IE，你可以使用ie filter

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 */

检查http://jsfiddle.net/sandeep/Hec3t/7/

Answer 2

使用一些:before和:after魔术，我可以使用以下代码创建它：

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

__

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