Question

我试图用HTML和CSS绘制一个三角形。但是我无法成功完成。

我查找了CSS中绘制三角形的最常见解决方案。

这是HTML代码：

<html>
    <head>
        <link rel="stylesheet" href="tiangle.css" type="text/css">
    </head>
    <body>
        <div id = 'triangle-up'></div>
    </body>
</html>

这是CSS代码：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
  }

该代码应绘制一个红色的朝上三角形，但显示空白页面。请帮忙。

Answer 1

您的CSS是否可能链接到拼写错误的tiangle.css，但您的实际文件名拼写正确（triangle.css）？

Answer 2

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
  }

<div id='triangle-up'></div>

您的验证码有效。确定要查看正确的文件吗？检查您的控制台日志。他们是在说任何404错误（例如，您未正确链接样式表）吗？

Answer 3

您的href中有一个错字。应该说三角形而不是三角形。

尝试使用HTML和CSS绘制三角形时出现黑屏

3 个答案: