尝试使用 HTML 和 CSS 绘制三角形时出现空白屏幕答案

【问题标题】：Blank screen when trying to draw a triangle with HTML and CSS尝试使用 HTML 和 CSS 绘制三角形时出现空白屏幕
【发布时间】：2019-05-06 10:43:52
【问题描述】：

我正在尝试用 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;
  }

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

【问题讨论】：

我可以看到红色三角形here。可能是您的 CSS 文件未正确链接到？
看起来你打错字了？？href="tiangle.css" 应该是“triangle.css”吗？
对不起！打错字了！

标签： html css css-shapes

【解决方案1】：

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

【讨论】：

正确！这是一个错字！

【解决方案2】：

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

&lt;div id='triangle-up'&gt;&lt;/div&gt;

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

【讨论】：

【解决方案3】：

你的href有错别字。它应该说三角形而不是三角形。

【讨论】：

应该是对帖子的评论