HTML，实现一个三角形

Posted on 2023-11-30 12:28 诺言1107 阅读(327) 评论(0) 编辑收藏举报

▲三角形的实现html很简单就是设置一个盒子然后重要部分是css主要部分那红是备注

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

css样试

width: 0; 行宽0。

height: 0; 行高0。

border-width: 100px;: 设置边框的宽度为100像素。由于元素的宽度和高度都为0，实际上这会导致一个三角形的形状，而不是一个矩形。

border-color:[上边框颜色，右边框颜色，下边框颜色，左边框颜色]。

内容介绍：下边框颜色填充颜色其他默认为 transparent 他的意思是透明背景的意思。

边框样式（border-style）属性：solid:边框为单实线。

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-color: transparent transparent rgb(255, 4, 45) transparent;
    border-style: solid;
    /* 三角形 */
}