悬停时div右侧的三角形

Question

我正在为网站构建这个新的HTML / CSS设计，但我只能触摸CSS文件。

我需要一个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或其他内容。

Answer 1

您可以这样做：

.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

Answer 2

如果我理解你 - 你可以使用伪元素，比如我们的CSS - The：Pseudo-element之前。如果您不理解对w3c的解释，例如我尝试编写代码