如何建立一些常見的CSS3不規則形狀

CSS3 不規則圖形設計在現代 Web 頁面設計中越來越流行。做不規則的設計已經變得越來越簡單，完全可以在不使用 JavaScript 或後端腳本的情況下實現。這個實作方式叫CSS3不規則。

CSS3 不規則的優點在於它的靈活性和可回應性。我們可以創建不同設備解析度的完美自適應頁面。此外，良好的不規則設計能夠為你的網站增加一些獨特的風格。

CSS3 不規則圖形的創建很容易，只需要對所需圖形進行切割，然後用向其周圍添加顏色或使用背景圖片來使其看起來更吸引人。

現在，讓我們來看看如何建立一些常見的 CSS3 不規則形狀。

1. 三角形

三角形是 CSS3 不規則圖形中最基本的形狀之一。可以透過以下程式碼來建立：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

2. 梯形

梯形同樣是一種簡單的形狀，與三角形類似。但與三角形不同的是，梯形有兩個短邊和兩個長邊。

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

3. 平行四邊形

平行四邊形是一個簡單的不規則形狀，可以用下面的程式碼建立：

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

4. 橢圓形

橢圓形是另一種CSS3 不規則形狀，可以用以下程式碼建立：

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

5. 多邊形

我們可以用下面的程式碼創建一個五角星：

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

總結

CSS3 不規則圖形設計並非難事。有了正確的工具和初步的知識，就能輕鬆創造出簡單的形狀。在 Web 頁面設計中，不規則的圖形設計能夠為頁面增添一些獨特風格，從而為我們的網站帶來更好的使用者體驗。

以上是如何建立一些常見的CSS3不規則形狀的詳細內容。更多資訊請關注PHP中文網其他相關文章！