資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在純 CSS 中建立像圖片一樣的形狀？
透過在 CSS 中使用剪輯，我們可以避免設計中的所有內容都看起來像一個盒子。您可以設計一個剪輯路徑和您想要在網頁上顯示的形狀，方法是利用各種基本形狀或 SVG。
網頁元素都定義在矩形框內。但這並不意味著所有內容都必須具有盒狀外觀。使用 CSS clip-path 屬性，您可以移除影像或其他元素的特定部分以產生醒目的效果。
讓我們深入瞭解本文，以更好地理解如何在純 CSS 中建立像圖片一樣的形狀。
使用 SVG 元素
SVG 元素是一個容器，它定義了一個新的座標系和視口。除了用作 SVG 文件的最外層元素外，它還可以用於將 SVG 片段嵌入到另一個 SVG 或 HTML 文件中。
示例
在下面的示例中，我們使用 SVG 在上傳到網頁的影像上繪製形狀。
<!DOCTYPE html>
<html>
<body>
<style>
img {
border: 4px #D5F5E3 solid;
border-top-left-radius: 25% 30%;
border-bottom-left-radius: 40% 10%;
border-top-right-radius: 30% 25%;
border-bottom-right-radius:70% 85%;
}
</style>
<img src="https://tutorialspoint.tw/images/logo.png" style="width:100%">
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個影像以及在網頁上顯示的影像上繪製的形狀。
使用 polygon()
透過設定每個點的座標，polygon() 值允許您根據需要定義任意數量的點以建立相當複雜的形狀。
示例
考慮以下示例，我們在其中使用polygon() 函式在影像上繪製形狀。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background-color: #EAFAF1 ;
padding: 21px;
border: 21px solid #D2B4DE ;
width: 201px;
height: 101px;
display: inline-block;
}
.shape {
clip-path: polygon(74% 1%, 99% 49%, 74% 101%, 1% 102%, 26% 52%, 1% 1%);
}
</style>
<div class="tutorial shape">
<img src="https://tutorialspoint.tw/images/logo.png">
</div>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，顯示上傳的影像以及在網頁上顯示的影像上繪製的形狀。
使用 ellipse()
由於橢圓本質上是一個扁平的圓形，因此它的行為與 circle() 非常相似，但它也採用 x 和 y 半徑以及橢圓的中心值。
示例
執行以下程式碼以瞭解如何使用ellipse() 方法在影像上繪製形狀。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background-color: #FCF3CF;
padding: 21px;
border: 22px solid #DE3163;
width: 201px;
height: 103px;
display: inline-block;
}
.shape {
clip-path: ellipse(130px 50px at center 70px);
}
</style>
<div class="tutorial shape">
<img src="https://tutorialspoint.tw/images/logo.png">
</div>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個影像以及在網頁上顯示的影像上繪製的形狀。
更新於: 2023年4月20日
879 次瀏覽
廣告