只需要箭头边框而不是颜色 [英] Need only border for arrow not color

问题描述

我正在尝试实现以下箭头.

为此，我只需要边框而无需颜色

请点击

解决方案

我将在转换前，转换后和转换后使用.为您提供更大的灵活性.

  .arrow {位置:相对；显示:行内块；最小宽度:100px；padding-left:1rem; padding-right:1rem;text-align:center;行高:2;min-height:2rem;}.arrow:之前，.arrow:之后{内容:" ";z索引:-1；显示:块;位置:绝对；左:0;上:-1px;边框:2px纯红色；高度:50％;宽度:100％;}.arrow:before {border-bottom:0;转换:skewX(45deg);}.arrow:之后{border-top:0;最高:50％;转换:skewX(-45deg);}.left:before {transform:skewX(-45deg);}.left:after {transform:skewX(45deg);}.blue:之前，.blue:之后{border-color:blue;}.bgpink:之前，.bgpink:之后{background-color:粉红色}  

 < div class ="arrow"></div>< br/>< br/>< br/>< div class =向左箭头">左侧的</div>< br/>< br/>< br/>< div class =箭头左蓝色">并更改边框颜色</div>< br/>< br/>< br/>< div class =箭头左蓝色bgpink">并也更改bg的颜色</div>  

I am trying to implement arrow as below.

For that I need only border not color

Please check this link here

.pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background: red;
  }
  .pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  .pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

<div class="pointer">
    
</div>

I am expecting to be like below image

解决方案

I'd use before, after and transform skew. Gives you more flexibility.

.arrow{
position:relative;
display:inline-block;
min-width:100px;
padding-left:1rem;padding-right:1rem;
text-align:center;
line-height:2;
min-height:2rem;
}
.arrow:before,.arrow:after{
  content:" ";
  z-index:-1;
  display:block;
  position:absolute;
  left:0;
  top:-1px;
  border:2px solid red;
  height:50%;
  width:100%;
}
.arrow:before{
 border-bottom:0;
 transform:skewX(45deg);
}
.arrow:after{
 border-top:0;
 top:50%;
 transform:skewX(-45deg);
}

.left:before{ transform:skewX(-45deg);}
.left:after{transform:skewX(45deg);}

.blue:before,.blue:after{border-color:blue;}

.bgpink:before,.bgpink:after{background-color: pink}

<div class="arrow"></div>
<br/>
<br/>
<br/>
<div class="arrow left"> to the left </div>
<br/>
<br/>
<br/>
<div class="arrow left blue"> and change border color </div>

<br/>
<br/>
<br/>
<div class="arrow left blue bgpink"> and change bg color too </div>

这篇关于只需要箭头边框而不是颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！