css 切版問題

css

janlin002 2025-05-15 10:17:02 ‧ 1526 瀏覽

分享至

想請問這種切版有什麼關鍵字可以查詢嗎？目前開發起來沒有頭緒

<template>
    <div class="header">
      <div class="logo">
        <img :src="logo" alt="logo" />
      </div>
  
      <nav class="nav">
        <a href="#">競賽主題</a>
        <a href="#">獎項說明</a>
        <a href="#">參加資格與辦法</a>
        <a href="#">賽程</a>
        <a href="#">常見問題</a>
      </nav>
  
      <a class="back-link" href="#">回官網</a>
    </div>
  </template>

<script setup lang="ts">
import logo from '@/assets/logo.svg'
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 24px 45px;
  border-radius: 12px;
  color: #222;
  position: relative;
}

/* nav 透明，字深藍色 */
.nav {
  display: flex;
  gap: 24px;
  background: blue;
  padding: 12px 200px;
  font-weight: 500;
  color: #fff;
  position: relative;
  margin: -12px -45px;

  /* 這裡是關鍵，製造上下切角 */


  clip-path: polygon(
    0% 0%,      /* 左上 */
    100% 0%,    /* 右上 */
    90% 100%,   /* 右下 */
    10% 100%    /* 左下 */
  );

  box-shadow: 0 4px 10px rgb(0 0 0 / 0.08);
  z-index: 1;
}

.nav a {
  text-decoration: none;
  color: inherit;
}

.back-link {
  color: #0C1F4A;
  font-weight: bold;
  text-decoration: none;
  z-index: 2;
}
</style>

h3786010 iT邦新手 5 級 ‧ 2025-05-15 10:24:46 檢舉

左右白色用png背景處理，比起純CSS簡單且可靠

davidchen0117 iT邦新手 4 級 ‧ 2025-05-15 10:28:51 檢舉

.header 使用 Flexbox 橫向排版~
polygon() 是用多邊形的方式裁切區塊外觀~
你想要怎麼改呢?可以怎麼幫你?

janlin002 iT邦好手 1 級 ‧ 2025-05-15 10:36:52 檢舉

@davidchen0117 目前的寫法會沒有辦法吃到最外層的背景，示意圖我放問題下方~~

登入發表討論

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

1 個回答

h3786010

iT邦新手 5 級 ‧ 2025-05-15 11:19:00

左右換成png背景圖或css polygon

<div class="header">
    <div class="left">
        <img src="logo" alt="logo" />
    </div>

    <nav class="nav">
      <a href="#">競賽主題</a>
      <a href="#">獎項說明</a>
      <a href="#">參加資格與辦法</a>
      <a href="#">賽程</a>
      <a href="#">常見問題</a>
    </nav>

    <div class="right">
        <a class="back-link" href="#">回官網</a>
    </div>

</div>

<style>
    body {
        margin: 0;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: blue;
      padding: 24px 45px 0;
      color: #222;
      position: relative;
    }

    /* nav 透明，字深藍色 */
    .nav {
      display: flex;
      gap: 24px;
      font-weight: 500;
      color: #fff;
      position: relative;
      z-index: 1;
    }

    .nav a {
      text-decoration: none;
      color: inherit;
    }

    .back-link {
      color: #0C1F4A;
      font-weight: bold;
      text-decoration: none;
      z-index: 2;
    }
    .left {
        width: 120px;
        height: 60px;
        background-color: #fff;
    }
    .right {
        width: 120px;
        height: 60px;
        background-color: #fff;
    }
</style>