如何使用css使箭头垂直变窄？

Question

如何使用css进行这种形状和悬停效果？我能够制作这个形状但不能添加悬停效果。任何人请建议我。

这是我的代码

Answer 1

我希望这会有所帮助

.my-icon {
    position: relative;
    float: left;
}

.my-icon > i {
    display: inline-block;
    width: 0px;
    height: 0;
    position: relative;
    line-height: 0;
    border: 2.69em solid transparent;
    border-left: 2.69em solid #efefef;
    right: 0px;
    top: 0px;
    display: inline;
    float: right;
}

.my-icon > i+i {
    display: inline-block;
    width: 50px;
    height: 0;
    line-height: 0;
    border: 1.5em solid #efefef;
    border-bottom: 1.5em solid #efefef;
    left: 0em;
    top: 1.2em;
    display: inline;
}

.my-icon:hover i:nth-child(2) {
 border: 1.5em solid red;
 color: #fff;
 cursor: pointer;
}
.my-icon:hover i:first-child {
 border-left: 2.69em solid red;
 cursor: pointer;
}

  <i class="my-icon">
    <i></i>
    <i>Item</i>
  </i>