只有CSS和Html旗幟橫幅

Question

我有一個網站，需要一些CSS製作的橫幅，我在創建它們時有點麻煩。我會告訴你我有什麼，但他們太尷尬分享...

我的目標是嘗試和只使用HTML和CSS來建立這些，而不是圖像。這就是我試圖用它裏面的文本構建的東西......我認爲這就是我失敗的地方。

任何幫助將不勝感激，並將保存我的頭痛打牆。

Answer 1

你唯一需要的是一個<div>元素和操縱CSS。

看一看here和here，因爲他們擁有的一切，你將需要開始

我也爲您創建了小提琴，會給你你想要的效果。

EXAMPLE

HTML

<div class="bookmarkRibbon"></div> 

CSS

.bookmarkRibbon{ 
    width:0; 
    height:100px; 
    border-right:50px solid blue; 
    border-left:50px solid blue; 
    border-bottom:30px solid transparent; 
} 

，這是你的文字裏標誌作爲您在畫面表現出來。

EXAMPLE

HTML

<div class="ribbon">BANNER</div> 

CSS

.ribbon { 
    text-align:center; 
    display:block; 
    width:100px; 
    height:100px; 
    background:#d00202; 
} 
.ribbon:after { 
    content:""; 
    display:block; 
    position:relative; 
    top:80px; 
    width:0; 
    height:0; 
    border-width:30px 50px 50px 50px; 
    border-style:solid; 
    border-color:#d00202 #d00202 transparent #d00202; 
}