??? 45? ?? ???? : CSS clip-path ???? ???? ?? ??? ????.

??? ?? ? ? ????? 45? ??? ???? ???? ??? ??? ?? ? ?? ?? ??? ?? ? ? ?? ??? ???? ??? ?????? ?? ??? ???? ?????? ??? ??? ??? ??????. ? ??? CSS? clip-path ??? ???? ?? ??? ?? ??? ??? ???? ?????.

?? ?? ??? ??? ?? 45? ?? ????? ??? ??? ?????.

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>45? ?? ?? ????</title>
<style>
.wrap {
  background-color: #eee;
  width: 375px;
  margin: 0 auto;
  padding: 10px;
}

.tabs {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#cdd9fe, #e2e9fd);
}

.tab {
  flex: 0 0 50.1%;
  height: 50px;
  cursor: pointer;
  position: relative;
  text-align: center;
  line-height: 50px;
}

.tab.active {
  background-color: #fff;
  color: #4185ef;
}

.tab.active:before { /* 左側(cè)曲線 */
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  height: 100%;
  width: 50px;
  z-index: 2;
  background-color: #fff;
  clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z');
}

.tab.active:after { /* 右側(cè)曲線 */
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  height: 100%;
  width: 50px;
  z-index: 2;
  background-color: #fff;
  clip-path: path('M 0,0 C 25,0 25,50 50,50 L 50, 50 Z');
}

.content-wrap {
  min-height: 200px;
  background-color: #fff;
}
</style>


<div class="wrap" x-data="initData()">
  <div class="tabs">
    <template x-for="index in 2">
      <div :class="{ 'active': activeIndex == index }" class="tab" x-text="'標(biāo)簽'   index"></div>
    </template>
  </div>
  <div class="content-wrap"></div>
</div>

<script>
function initData() {
  return {
    activeIndex: 1,
    onTabClick(index) {
      this.activeIndex = index;
    }
  };
}
</script>

???? clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); 45? ??? ??? ?????. ??? ?? ? ? ????? ??? ???? ?? JavaScript? ?? active ???? ??????. ? ??? ???? ?????? ??? ??? ?? ????? ????. ? ????? ?? clip-path ???? ?? ????? ?????.

? ??? CSS? ?? ?? ??? ???? ????? 45? ?? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!