border-bottom控制右边直角边的长度。而border-left决定底部直角边的长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2.6 用css画一个三角形</title>
</head>
<style>

.triangle {
    border-left: 60px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 40px solid orange;
    width: 0;
    height: 0;
}

</style>
<body class="home">
    <div class="triangle"></div>
</body>
</html>

切换四个border的设置可以控制直角边在不同的位置，例如想要直角边在右上角，则应该设置border-left和boder-top。

results matching ""

    No results matching ""