三角在右側div懸停

我正在爲網站構建這個新的HTML/CSS設計，但我只允許觸摸CSS文件。三角在右側div懸停

我需要一個div來獲得在右端上的三角形過這樣的：

這是當前的代碼：

.slider_button_out{ 
    cursor:pointer; 
    height:49px; 
    width:174px; 
    margin-bottom: 1px; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #0C4B9D),color-stop(1, #023C7F)); 
    background-image: -o-linear-gradient(bottom, #0C4B9D 50%, #023C7F 100%); 
    background-image: -moz-linear-gradient(bottom, #0C4B9D 50%, #023C7F 100%); 
    background-image: -webkit-linear-gradient(bottom, #0C4B9D 50%, #023C7F 100%); 
    background-image: -ms-linear-gradient(bottom, #0C4B9D 50%, #023C7F 100%); 
    background-image: linear-gradient(to bottom, #0C4B9D 50%, #023C7F 100%); 
} 

/*the div down here is the div that displays on hover */ 
.slider_button_over{ 
    display:block; 
    cursor:pointer; 
    background-image: none; 
    height:49px; 
    width:174px; 
    margin-bottom: 1px; 
    background-color: #ed1c24; 
}

請注意，我只能碰CSS，所以我不能添加div或其他東西。

來源

2014-02-20 Goos van den Bekerom

使用這個CSS三角形生成器並將其應用到年底你的div http://apps.eky.hk/css-triangle-generator/ – SaturnsEye

@Adsy謝謝，但我怎麼才能把它應用到最後？當我不能添加一個新的div到HTML？ –

你可以做這樣的事情：

.container { 
    margin-left: 15px; 
    width: 200px; 
    background: #FFFFFF; 
    border: 1px solid #CAD5E0; 
    padding: 4px; 
    position: relative; 
    min-height: 200px; 
} 

.container:after { 
content: ''; 
display: block; 
position: absolute; 
top: 80px; 
left: 100%; 
width: 0; 
height: 0; 
border-color: transparent transparent transparent #CAD5E0; 
border-style: solid; 
border-width: 10px; 
}

Fiddle Demo

來源

2014-02-20 09:06:46 Felix

啊我明白了，謝謝。我會嘗試這個，如果它工作你最好的; P –

與一點編輯它工作得很好！非常感謝你！ –

其實不用擔心。很高興它幫助雖然:) – Felix

如果我可以理解你 - 你可以使用僞元素，比如我們的CSS -The：之前的僞元素。如果你不明白在W3C例如解釋我嘗試編寫代碼

來源

2014-02-20 09:05:37 Anton

三角在右側div懸停

回答

相關問題