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

【问题标题】：How to make arrow narrower vertically with css?如何用css使箭头垂直变窄？
【发布时间】：2016-12-05 02:06:53
【问题描述】：

如何使用 CSS 制作这种形状和悬停效果？我可以制作这种形状，但无法添加悬停效果。任何人，请给我建议。

这是我的代码

【问题讨论】：

【解决方案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>

【讨论】：