純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箭頭幫助

回答

相關問題