大佬教程收集整理的这篇文章主要介绍了jquery – 带自定义角落的html按钮,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我设法用简单的CSS绕过按钮底部的角落但是对于顶角我想要实现这样的事情:
有没有办法在CSS / jQuery或其他插件中执行此操作?
编辑:
该按钮的HTML是:
<button type="submit" class="btn navbar-btn second-navbar-button"> <span class="mdi mdi-eye second-navbar-icon"></span> <span class="second-navbar-name"> Overview</span> </button>
按钮的CSS如下所示
.second-navbar-button { font-size: 26px; border: none; BACkground-color: transparent; color: #ec9f14; margin: 0 19px 0 19px; padding: 0px 8px 0px 8px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
按钮之间有空隙,因此操作相邻按钮的角落将无法正常工作.
干杯,
TrAMMy
.button{ border:1px solid red; border-bottom:0; width:80px; height:40px; margin:30px; position:relative; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; } .button:after,.button:before{ content:''; width:40px; height:30px; border:1px solid red; position:absolute; bottom:-3px; border-top:0; } .button:after{ border-left:0; -moz-border-radius:0 0 5px 0; -webkit-border-radius:0 0 5px 0; left:-41px; } .button:before{ border-right:0; -moz-border-radius:0 0 0 5px; -webkit-border-radius:0 0 0 5px; right:-41px; }
<div class="button">text</div>
以上是大佬教程为你收集整理的jquery – 带自定义角落的html按钮全部内容,希望文章能够帮你解决jquery – 带自定义角落的html按钮所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。