css将图像的右侧转换为箭头

Question

我有一个120px x 40px的矩形精灵图像。当有人选择图像时，我希望所选图像的右侧变成指向右侧的箭头。 我知道如何使用border-radius但是这会产生曲线，而我想要一个点。 使用css如何将图像的右侧转换为箭头？

由于

基本上我只想在右侧执行边界半径，而不是像箭头一样弯曲。

.selected {
 -webkit-border-radius: 0px  25px 25px 0px;
 border-radius: 0px  25px 25px 0px;
}

Answer 1

如果你能保持白色背景，这是一个非常简单的解决方案：

jsFiddle here

在以下示例的背景中运行图像。

<强> HTML

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<强> CSS

.container {
    background: #333;
    width: 200px;
    height: 60px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
.container:hover::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 30px;
    background: #fff;
    top: -20px;
    right: -20px;
    z-index: 1;
    transform: rotate(45deg);
}
.container:hover::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 30px;
    background: #fff;
    bottom: -20px;
    right: -20px;
    z-index: 1;
    transform: rotate(-45deg);
}

Answer 2

我不知道，我理解你的问题，但我想，你想要实现的目标，可以通过jQuery和css函数与background-position

完成

Answer 3

基本上，如果你想使用CSS Sprite图像，background-position确实会这样做。

您可能希望在图片上放置<div>，这将在悬停（CSS :hover）或点击（jQuery click事件）图片时显示，具体取决于具体内容你的意思是＆＃34;选择＆＃34;它

以下是hovering case（纯CSS）的示例，这里是example for the clicking case（有3行jQuery）。