如何使一個3D的旗幟覆蓋（??）與CSS

我想創建一個橫幅，越過頁面的一部分，我可能沒有使用正確的術語...如何使一個3D的旗幟覆蓋（??）與CSS

我見過這在越來越多的網站上，但同時試圖找到使用這個網站，我一直在努力找到檢查。但我確實找到了一個有趣的例子。

http://www.bmbw.com

-Their頭標誌是比內容的其餘部分較大，與底部的兩個邊緣的角度。 -Their「BMBW更新」和「BMBW雪情報告」也對各自的這種效果邊緣。

這是我試圖做的風格，但我很好奇最好的方式來做到這一點。

更新，雪情報告和導航（使標題看起來像3d）具有內置到圖像中的效果。

但我也看到了對角效果，它不會影響功能。我想我只是問是否有另一種方式來做到這一點，而不是將其構建到圖像本身中。

任何想法？

來源

2011-12-12 Brett

實際上，你可以做到這種效果沒有任何使用CSS三角進攻任何圖片做的好方法。我創建了一個帶有一個工作示例的jsFiddle：http://jsfiddle.net/P8W7F/

來源

2011-12-12 22:05:22 Aaron

+1不錯，從來沒有聽說過這個伎倆 - 你可以添加鏈接給你r發佈？ – ptriek

CSS漸變和陰影是如果你使用CSS3

來源

2011-12-12 21:39:59 Mike

我查看了他們的頁面，但他們已經用圖像完成了它。

最簡單的方法是有一個厚頂邊的第二個div。如果你有這樣的HTML：

<div class="banner">first content</div> 
<div class="shadow_simple"></div> 
<div class="next_content">next content block</div>

那麼這個CSS就可以了：

.banner { 
    width: 400px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
} 
.shadow_simple { 
    margin:auto; 
    width: 360px; 
    height:12px; 
    border-top: 12px solid #daa520; 
    border-left: 20px solid white; 
    border-right: 20px solid white; 
    border-bottom: none; 
} 
.next_content { 
    width: 360px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
    border: 1px solid #daa520; 
    margin-top:-24px; 
}

相同，但有梯度的三角形：

<div class="banner">first content</div> 
<div class="shadow_gradient"> 
    <div class="shadow_simple"></div> 
</div> 
<div class="next_content">next content block</div>

而CSS：

.banner { 
    width: 400px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
} 
.shadow_simple { 
    margin:auto; 
    width: 360px; 
    height:12px; 
    border-top: 12px solid transparent; 
    border-left: 20px solid white; 
    border-right: 20px solid white; 
    border-bottom: none;  
} 
.shadow_gradient { 
    width: 400px; 
    height:24px; 
    margin:auto; 
    margin-bottom:12px; 
    box-shadow: inset 0px 5px 12px #daa520; 
} 
.next_content { 
    width: 360px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
    margin-top:-36px; 
    border:1px solid #daa520 
}

來源

2011-12-12 22:14:56

現在我看到它與Aaron所說的基本相同。 –

如何使一個3D的旗幟覆蓋（??）與CSS

回答

相關問題