实现两个直角梯形按钮斜切的效果草稿

采用 svg + 绝对定位的方式，能够精准应用到每个像素点

div 代替 svg ，那么和 border 方案一样，斜切处的点击只能生效某一边

    <!-- 中间只能是正方形，通过 border-color 设置两个地方为透明实现45°斜分割 -->

    <style type="text/css">
      .example {
        overflow: hidden;
        background: #f5d7b7;
        height: 44px;
        padding: 0;
        line-height: 44px;
      }

      .example > li {
        float: left;
        position: relative;
        width: 50%;
        text-align: center;
        list-style: none;
      }

      .example > li:before,
      .example > li:after {
        position: absolute;
        top: 0;
      }
      .example > li:before {
        width: 44px;
        height: 44px;
        right: -43px;
        background: inherit;
      }

      .example > li:after {
        right: -44px;
        border: 22px solid;
        border-color: transparent #f5d7b7 #f5d7b7 transparent;
      }

      .example > li.active {
        background: -webkit-linear-gradient(
          top,
          #f3941d,
          #f3941d 50%,
          #f08513 50%,
          #f08513
        );
      }

      .example > li.active:before,
      .example > li.active:after {
        content: "";
      }
    </style>
    <ul class="example">
      <li class="active">首页案例1</li>
      <li>首页案例2</li>
    </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 0高元素，利用 border 上颜色和右透明实现夹角

<style>
#btn_cont{
  position: relative;
  margin: 0 auto;
  margin-top: 10%;
  /* NOT IMPORTANT */
  
  width: 300px;
  border: 2px solid #fff;
  height: 30px;
}
.btn1 {
  display: block;
  position: absolute;
/*   float: left; */
  width: 0px;
  height: 0px;
  cursor: pointer;  
}
.btn1{
  border-top: 30px solid #c74523;
  border-right: 110px solid transparent;
  left: 0px;
  z-index: 1;
}


</style>


<div id="btn_cont">
  <div class="btn btn1">
<!--     <span>BTN 1</span> -->
  </div>
<!--    <div class="btn">
    <span>BTN 2</span>
  </div> -->
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 注

以上两个 demo 都只能是固定颜色的三角形，如果要完全渐变，只能使用 svg 方案

编辑

上次更新: 2023/08/26, 10:18:07

← 响应式卡片分页最多2行文本&单行文本居底→