CSS:在纯CSS箭头上创建边框 [英] CSS: Make border on pure-CSS arrow
本文介绍了CSS:在纯CSS箭头上创建边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个程式码片段:
.multiply-button {display:table; background:rgba(0,0,0,0); border:none;颜色:白色; padding:0;} multiply-button-content {display:table-cell;背景:绿色; padding:10px 9px; border:solid 1px black; border-right:none!important;} multiply-button-arrow {display:table-cell; width:0px; height:0px; border-style:solid; border-width:20px 0 20px 12px; border-color:transparent透明绿色;}
< button id =multiply-buttonclass =multiply-button> < div class =multiply-button-content>乘法< / div> < div class =multiply-button-arrow>< / div>< / button>
我需要在这个箭头按钮上做边框。
解决方案
我可以很容易地边框矩形部分(我已经做了)
.multiply-button {display:table; background:rgba(0,0,0,0); border:none;颜色:白色; padding:0;} multiply-button-content {display:table-cell;背景:绿色; padding:0 9px; border:solid 1px black; border-right:none!important;位置:相对; vertical-align:middle; height:40px; / * double the border width * / box-sizing:border-box;}。multiply-button-content:after,.multiply-button-content:before {left:100%; top:50%;边框:实心透明; content:; height:0; width:0; position:absolute; pointer-events:none; border-width:20px 0 20px 12px; margin-top:-20px;}。multiply-button-content:after {border-color:rgba(0,128,0,0); border-left-color:#008000; margin-left:-1px;}。multiply-button-content:before {border-color:rgba(0,0,0,0); border-left-color:#000000;}
button id =multiply-buttonclass =multiply-button> < div class =multiply-button-content>乘法< / div>< / button>
I have this code snippet:
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 10px 9px;
border: solid 1px black;
border-right: none !important;
}
.multiply-button-arrow {
display: table-cell;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 12px;
border-color: transparent transparent transparent green;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
<div class="multiply-button-arrow"></div>
</button>
I need to make border on this "arrowed" button. I can easily border rectangle part (I've already did it), but how to make this border on triangle part?
解决方案
The following should do what you need
.multiply-button {
display: table;
background: rgba(0, 0, 0, 0);
border: none;
color: white;
padding: 0;
}
.multiply-button-content {
display: table-cell;
background: green;
padding: 0 9px;
border: solid 1px black;
border-right: none !important;
position: relative;
vertical-align:middle;
height: 40px; /* double the border width */
box-sizing: border-box;
}
.multiply-button-content:after,
.multiply-button-content:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 20px 0 20px 12px;
margin-top: -20px;
}
.multiply-button-content:after {
border-color: rgba(0, 128, 0, 0);
border-left-color: #008000;
margin-left: -1px;
}
.multiply-button-content:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: #000000;
}
<button id="multiply-button" class="multiply-button">
<div class="multiply-button-content">Multiply</div>
</button>
这篇关于CSS:在纯CSS箭头上创建边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文