画一个三角形

html&css

发布日期: 2022-05-11

文章字数: 199

阅读时长: 1 分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画一个三角形</title>
    <style>
        /* 由于元素内容没有宽高，所以只有设置任意不同轴上的border才能构成图形 */
        div {
            height: 0;
            width: 0;
            border-top: 100px solid transparent;
            /* 设置100px border 也就是向上凸起100px 由于元素没有宽高单设置时没有实际作用 */
            border-left: 100px solid pink;
            /* 设置100px border 也就是向左凸起100px 由于元素没有宽高单设置时没有实际作用 */
            /* 构成一个正方形 top和left平分 隐藏一边就构成了一个三角形*/

            /* border-right: 100px solid transparent;
            border-bottom: 100px solid transparent; */
        }
    </style>
</head>

<body>

</body>

</html>