html - css 将图像的右侧变成箭头

Question

我有一个 120 像素 x 40 像素的矩形 Sprite 图像。当有人选择图像时，我希望所选图像的右侧变成指向右的箭头。我知道如何使用 border-radius 但它给出了一条曲线，而我想要一个点。使用 css 如何将图像的右侧变成箭头？

谢谢

基本上我只想在右侧执行 border-radius，而不是像箭头那样 flex 。

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