Html 悬停时div右侧的三角形

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

我需要一个div在右端得到一个三角形，就像这样：

.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;
}

这是当前代码：

.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或其他内容。

如果我完全理解您的意思，您可以使用伪元素，例如我们的CSS-before伪元素。如果您不理解w3c的解释，例如，我尝试编写代码，您可以这样做：

.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;
}

---

使用此css三角形生成器并将其应用于div@Adsy的末尾，谢谢，但我如何将其应用于末尾？当我不能在html中添加新的div时？啊，我明白了，谢谢。如果这是最好的，我会试试看；经过一点编辑，效果很好！非常感谢你！事实上，不必为此烦恼。但很高兴它有所帮助：）