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

Posted 2023-03-06

【中文标题】如何用css使箭头垂直变窄？

【英文标题】：How to make arrow narrower vertically with 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>