新闻中心News
设计前沿

设计按钮边框圆角 中间斜杠(斜线)代码

作者:来源:访问:600时间:2025-02-23

设计按钮边框圆角 中间斜杠(斜线)代码

 按钮中间斜线代码实现的原理就是利用css改变属性从而达到想要的效果,请看图

微信截图_20250223164114

看起来是不是很美观,我们还可以吧中间的斜线留间隙,具体代码如何实现呢?代码如下:

实现方法

首先设置一个 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,去掉即可,效果如下

好了,给按钮增加美观,就按这个方法实现。

Go To Top 回顶部