纯CSS箭头帮助 [英] pure css arrow help

问题描述

下面的图片描述了这个问题。我创建我们的评论表格。并且要在ffffff背景颜色中创建指针箭头，以及1px aaaaaa和边框底部fff的边框，因此它可以舒服地放在我们的容器div上

The image below describes the issue. I am creating our comment forms. And want to create the pointer arrow in ffffff background color, and a border of 1px aaaaaa and border bottom fff so it sits comfortably on our container 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;你可以使用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。

you can use :after, :before instead of span.

可以使用ie过滤器

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/

这篇关于纯CSS箭头帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！