三角在右侧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悬停

回答

相关问题