資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚學
法律研究如何使用 CSS clip-path 建立三角形？
在網頁上，建立一個三角形很簡單。可以使用 clip-path 屬性，甚至可以利用子選擇器概念。clip-path 允許使用者將元素裁剪為一個形狀。此形狀應被設定為多邊形以建立三角形。
語法
CSS clip-path 屬性的語法如下 −
Selector {
clip-path: /*value*/
}
使用 clip-path 建立三角形
以下示例展示了 CSS clip-path 屬性。在此，我們已將 clip-path 形狀設定為多邊形以建立三角形。這是使用 polygon() 方法完成的 −
clip-path: polygon(50% 0, 100% 100%, 0% 100%);
示例
以下示例使用 polygon() 建立三角形 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 10%;
border-radius: 2%;
width: 10%;
box-shadow: inset 0 0 80px violet;
clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用子選擇器建立多個三角形
可以使用子選擇器來建立多個三角形形狀。在此，我們在 div 內有一個 div，即 div > div −
div > div {
height: 12px;
border-top: 40px ridge orange;
border-right: 20px solid white;
border-bottom: 60px ridge cornflowerblue;
border-left: 80px solid white;
}
示例
以下示例選擇所有為 <div> 子元素的 <div> 元素 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 10px 0 20px;
}
div > div {
height: 12px;
border-top: 40px ridge orange;
border-right: 20px solid white;
border-bottom: 60px ridge cornflowerblue;
border-left: 80px solid white;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
更新於: 14-12-2023
533 次瀏覽
廣告