我有一个 120 像素 x 40 像素的矩形 Sprite 图像。当有人选择图像时,我希望所选图像的右侧变成指向右的箭头。 我知道如何使用 border-radius 但它给出了一条曲线,而我想要一个点。 使用 css 如何将图像的右侧变成箭头?
谢谢
基本上我只想在右侧执行 border-radius,而不是像箭头那样 flex 。
.selected {
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}
最佳答案
如果你能在这里保持白色背景是一个非常简单的解决方案:
在以下示例的背景中运行图像。
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);
}
关于html - css 将图像的右侧变成箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26367513/