只需要箭头边框而不是颜色 [英] 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屋!
查看全文