纯CSS箭头帮助

下图描述了这个问题。我正在创建我们的评论表单。并且想要创建ffffff背景颜色的指针箭头，以及1px aaaaaa和border fff的边框，所以它舒适地坐在我们的容器div上纯CSS箭头帮助

我遇到的问题是我可以制作纯色指针，但不确定如果我能做出我想要的东西，那么我想请在这里问。

enter image description here

用于指针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;

}

来源

2011-06-27 422

@ 422;你可以用css来做这个rotate属性。

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>

你可以使用：之前不是跨度：后。

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/

来源

2011-06-27 11:37:33 sandeep

野老该'-moz变换-rotate'是一个特定浏览器的扩展。 –

第二个看起来不错，+1 –

我不知道可以从CSS制作箭头。（+1）谢谢 – Starx

使用一些: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/

来源

2011-06-27 11:42:49

这在IE8和Chrome中看起来不错，但我认为FF需要一点调整。 –

哈哈酷，是的，这是一个耻辱。在ff中提供了双线外观。好努力，谢谢 – 422

我相信它可以固定FF，我只是没有把时间放在它 - 我只是在几分钟内掀起它。看起来非常完美的IE8这是一个惊喜:) –

纯CSS箭头帮助

回答

相关问题