4つの三角形

効果：

エフェクト画像

スタイル：

 .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-right: 20px solid red;
            border-left: 20px solid blue;
            border-bottom: 20px solid orange;
        }

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-right: 20px solid red;
            border-left: 20px solid blue;
            border-bottom: 20px solid orange;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

左の三角形

効果：

左の三角形の写真

スタイル：

 .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 左侧设置边框样式 */
            border-left: 20px solid red;
        }

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 左侧设置边框样式 */
            border-left: 20px solid red;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

直角三角形

効果：

直角三角形

スタイル：

.angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 右侧设置边框样式 */
            border-right: 20px solid blue;
        }

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 右侧设置边框样式 */
            border-right: 20px solid blue;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

上三角

効果：

上三角

スタイル：

 .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 上边设置边框样式 */
            border-top: 20px solid orange;
        }

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 上边设置边框样式 */
            border-top: 20px solid orange;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

下の三角形

効果：

下の三角形

スタイル：

.angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 下边设置边框样式 */
            border-bottom: 20px solid pink;
        }

コード：

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .angle{
    
    
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 下边设置边框样式 */
            border-bottom: 20px solid pink;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

注意：

width：0widthは0です
高さ：0高さは0です
境界線のスタイルを設定する

cssトライアングルアプローチ（クイックスタート）

4つの三角形

効果：

スタイル：

コード：

左の三角形

効果：

スタイル：

コード：

直角三角形

効果：

スタイル：

コード：

上三角

効果：

スタイル：

コード：

下の三角形

効果：

スタイル：

コード：

注意：

おすすめ