我試圖找出一種方法來使用附加箭頭到標頭圖像的底部，like this。我已經看到了很多關於如何使用CSS3創建箭頭的方法，但是我發現他們幾乎總是使用border屬性來實現它。通常是這樣的：圖像上的CSS箭頭（不使用邊框）

#demo { 
    width: 100px; 
    height: 100px; 
    background-color: #ccc; 
    position: relative; 
    border: 4px solid #333; 
} 

#demo:after { 
    border-width: 9px; 
    border-left-color: #ccc; 
    top: 15px; 
}

我試圖找到一種方法來創建那種面具的形狀，而不比主要的藝術以外的任何圖像。有沒有人做到這一點？如果任何人有任何想法，將不勝感激。

來源

2013-03-03 Nate

有不會是一個簡單的方法來做到這一點...可能是更容易用圖像來解決它。如果你從網站上得到這個例子，我可以看看他們的來源，並告訴你他們做了什麼。 – 2013-03-03 18:52:42

我理解你嗎？你想使用css3添加一個箭頭，但不使用邊界屬性或附加圖像。 – Nek 2013-03-03 18:58:00

是的，基本上我不能使用邊框，因爲這會使箭頭變成純色。我寧願不使用其他圖片，因爲我的標頭廣告（全寬）與窗口大小一致，如果它放大，箭頭將變成像素化的。我想保持它清晰，所以我想知道是否有可能用CSS3添加箭頭形狀的遮罩。 – Nate 2013-03-03 19:34:49

如果你正在尋找一個箭頭，調整圖像的大小，那麼是的，它可以完成。

DEMO

HTML：

<div class='head'></div> 
<div class='arrow'></div>

CSS：

.head { 
    margin: 0 auto; 
    width: 0; height: 0; 
    /* take into account ratio of the image but with 20% less for the height */ 
    padding: 12.5% 30%; 
    background: url(background.jpg); 
    background-size: cover; 
} 
.arrow { 
    overflow: hidden; 
    position: relative; 
    margin: -4.9% auto; 
    padding: 4.42%; /* 25% of head's padding * sqrt(2) */ 
    width: 0; 
    transform: rotate(45deg); 
    background: red; 
} 
.arrow:after { 
    position: absolute; 
    bottom: 50%; left: 50%; 
    margin: -70.71%; /* half of the width or height */ 
    width: 141.42%; height: 141.42%; /* sqrt(2)*141.42% */ 
    transform: rotate(-45deg); 
    background: url(background.jpg) 50% 100%; 
    background-size: 480% 250%; /* take into account ratio of the image */ 
    content: ''; 
}

來源

2013-03-03 22:38:26 Ana

偉大的東西安娜。謝謝！ – Nate 2013-03-04 00:13:05

圖像上的CSS箭頭（不使用邊框）

回答

DEMO

相關問題