CSSで直角台形を作る方法-CSSチュートリアル-php.cn

CSSで直角台形を作る方法

WBOY

リリース： 2021-12-03 17:09:18

オリジナル

8134 人が閲覧しました

CSS では、border 属性を使用して直角台形を作成できます。構文は「要素 {border: 0px ソリッド透明; border-top: 台形の高さソリッドカラー; border-left: 台形の長さ」になります。透明な固体}"。

CSSで直角台形を作る方法

このチュートリアルの動作環境: 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=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
        }
</style>
</body>
</html>

ログイン後にコピー

出力結果:

CSSで直角台形を作る方法

次に境界線を指定します。設定した色に変更枠線の太さの値を設定するだけです色や透明色の設定は必要ありません例は以下のとおりです:

<!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=&#39;ti&#39;><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で直角台形を作る方法