CSS絲帶右側

我想創建此圖像上的絲帶效果一樣（圖像的紅色部分）內箭頭：當我嘗試創建邊框箭頭效果 ribbon example CSS絲帶右側

，形狀對象被徹底摧毀：

HTML代碼：

<a href="#" class="mali_oglas_kategorija">Kategorija</a>

CSS代碼到目前爲止（但不嘗試創建箭頭）：

.mali_oglas_kategorija {   
     position: relative; 
     display: inline-block; 
    font-weight: bold; 
     width: 100px;   
    padding: 6px 20px 6px 40px; 
    margin: 10px 10px 10px -18px; 
     color: #e5e5e5 !important; 
    background-color: #760000; 
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5); 
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5); 
    box-shadow: 0px 2px 4px rgba(0,0,0,.5);}  
.mali_oglas_kategorija:after{ 
     content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 0px; 
    top: 100%; 
    border-width: 5px 10px; 
    border-style: solid; 
    border-color: #470000 #470000 transparent transparent; 
}

任何想法如何創建？

來源

2012-05-22 Sasha

好從哪個頁面是這樣嗎？你可以查看HTML和樣式表的代碼（如果它不是圖像）並寫出類似的東西。 –

這是設計師發送給我的圖片（他不知道編碼），我需要以某種方式創建此：D – Sasha

@Sasha請檢查它是否爲： - http://stackoverflow.com/questions/10409248/how - 創建3d-ribbon-box-in-css –

Made a fiddle here.雖然沒有b標籤但解決不了。我用B，因爲它是如此之小

HTML

<a href="#" class="mali_oglas_kategorija">Kategorija<b></b></a>

CSS

.mali_oglas_kategorija {   
    position: relative; 
    display: inline-block; 
    font-weight: bold; 
    width: 100px;   
    padding: 6px 20px 6px 40px; 
    margin: 10px 10px 10px -18px; 
    color: #e5e5e5 !important; 
    background-color: #760000; 
    -webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5); 
    -moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5); 
    box-shadow: 3px 2px 4px rgba(0,0,0,.5);}  
.mali_oglas_kategorija:before{ 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 0px; 
    top: 100%; 
    border-width: 5px 10px; 
    border-style: solid; 
    border-color: #470000 #470000 transparent transparent; 
} 

.mali_oglas_kategorija:after{ 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    right: -10px; 
    top: 0; 
    border-width: 10px 5px; 
    border-style: solid; 
    border-color: #760000 transparent transparent #760000 ; 
} 
.mali_oglas_kategorija b { 
    position: absolute; 
    width: 0; 
    height: 0; 
    right: -10px; 
    bottom: 0; 
    border-width: 10px 5px; 
    border-style: solid; 
    border-color: transparent transparent #760000 #760000 ; 
} 


body { padding: 50px;}

來源

2012-05-30 11:16:59

雖然這可能會在理論上回答這個問題，但[最好]（http：//meta.stackexchange。 com/q/8259）在這裏包括答案的基本部分，並提供參考鏈接。 –

你也可以使用一個傾斜的元素，如果這是需要命中測試也是如此。

喜歡的東西：

.rib { 
 
    margin-left: 20px; 
 
    height: 40px; 
 
    width: 200px; 
 
    position: relative; 
 
    background: gray; 
 
    color: white; 
 
    line-height: 40px; 
 
    text-align: center; 
 
} 
 
.rib:before, 
 
.rib:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 0; 
 
    height: 50%; 
 
    width: 40px; 
 
    background: inherit; 
 
} 
 
.rib:before { 
 
    transform: skewX(-45deg); 
 
} 
 
.rib:after { 
 
    transform: skewX(45deg); 
 
    top: 50%; 
 
} 
 
.shad { 
 
    position: absolute; 
 
    height: 40px; 
 
    width: 20px; 
 
    top: 0%; 
 
    left: 0; 
 
    background: dimgray; 
 
    transform-origin: top left; 
 
    transform: skewY(45deg); 
 
    z-index: -1; 
 
    box-shadow:inset 0 0 10px black; 
 
}

<div class="rib">123 
 
    <div class="shad"> 
 
    </div> 
 
</div>

來源

2015-05-06 10:43:37 jbutler483

回答

相關問題