CSS では、border 属性を使用して直角台形を作成できます。構文は「要素 {border: 0px ソリッド透明; border-top: 台形の高さソリッド カラー; border-left: 台形の長さ」になります。透明な固体}"。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css で直角台形を作成する方法
css では、まず空の要素の境界線のサイズを 0 に設定できます。色を透明にして、片側の枠線のサイズを台形の高さに設定し、枠線の色を台形の色に設定します。
境界線属性を使用する必要があります。例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
}
</style>
</body>
</html>出力結果:
次に境界線を指定します。設定した色に変更 枠線の太さの値を設定するだけです 色や透明色の設定は必要ありません 例は以下のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
}
</style>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで直角台形を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
