HTML,实现一个三角形

发布时间 2023-11-30 12:32:50作者: 诺言1107

▲三角形的实现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;
    /* 三角形 */
}