设计按钮边框圆角 中间斜杠(斜线)代码
按钮中间斜线代码实现的原理就是利用css改变属性从而达到想要的效果,请看图
看起来是不是很美观,我们还可以吧中间的斜线留间隙,具体代码如何实现呢?代码如下:
首先设置一个 div
,class设置为button-container
,并设置上左右两面的圆角。
.button-container { display: flex; overflow: hidden; /* 隐藏溢出部分,避免嵌入部分超出容器 */ } .button { position: relative; width: 150px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold; border: none; color: white; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); /* 为按钮添加裁剪路径,实现倾斜效果 */ } .t1{border-radius: 45px 0px 40px 45px;} .t2{border-radius: 40px 45px 45px 0px;} .button:first-child { background-color: red; z-index: 1; margin-right: -29px; /* 使按钮相互嵌入 */ } .button:last-child { background-color: blue; z-index: 1; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); /* 为按钮添加不同的裁剪路径,实现倾斜效果 */ }
html部分我们写两个按钮
div class="button-container"> button class="button t1">加入购物车 button class="button t2">立即购买 /div>
这样就实现了,如果我们要把斜线中间留空白斜线,可以吧css设置为display: flex
,去掉即可,效果如下
好了,给按钮增加美观,就按这个方法实现。