【问题标题】：how to draw a rectangle in HTML or CSS?如何在 HTML 或 CSS 中绘制一个矩形？
【发布时间】：2019-08-29 16:18:00
【问题描述】：

我正在尝试绘制一个矩形，并找到了 css 代码的网站 (http://css-tricks.com/examples/ShapesOfCSS/)。如何在 HTML 中组合在一起？换句话说，我如何在 HTML 中定义#rectangle。

Facebook 在每个页面的顶部总是有蓝色矩形。像他们一样实现目标的最佳方法是什么？

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

呃...<div></div>.
否则，你可以用 HTML5 来绘制 w3schools.com/html/html5_canvas.asp
你知道默认情况下每个 html 块级元素都是一个矩形。

标签： html css css-shapes

【解决方案1】：

Fiddle

HTML

<div id="rectangle"></div>

CSS

#rectangle{
    width:200px;
    height:100px;
    background:blue;
}

我强烈建议您阅读CSS selectors 和the basics of HTML。

【讨论】：

非常感谢。 #rectangle 就像 Java 中的一个方法，对吗？
我不确定你的意思，HTML 和 CSS 不是编程语言，没有方法或功能。 CSS 只是将某种样式应用于 id 为“矩形”的元素。我想在某种程度上它是“调用”#rectangle“方法”......

【解决方案2】：

使用<div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>

这将创建一个蓝色矩形。

【讨论】：

你使用内联 CSS 样式？
这样一来就可以轻松复制/粘贴
对于那些正确使用本网站的人。这很好。无论如何，你不应该来这里学习 CSS 和 HTML。虽然这两种选择都是最好的。

【解决方案3】：

SVG

建议将 svg 用于图形元素。在使用 css 设置元素样式时。

#box {
  fill: orange;
  stroke: black;
}

<svg>
  <rect id="box" x="0" y="0" width="50" height="50"/>
</svg>

【讨论】：

这是唯一实际给出<rect> 元素的答案，这可能是提问者想要的，而不是<div> 元素。

【解决方案4】：

要模仿 facebook 上固定位置的矩形，请尝试以下操作：

<div id="rectangle"></div>

CSS

#rectangle {
    width:100%;
    height:60px;
    background:#00f;
    position:fixed;
    top:0;
    left:0;
}

【讨论】：

【解决方案5】：

我在我的 eBay 列表中执行以下操作：

<p style="border:solid thick darkblue; border-radius: 1em; 
          border-width:3px; padding-left:9px; padding-top:6px; 
          padding-bottom:6px; margin:2px; width:980px;">

这会产生一个带圆角的框边框。您可以使用变量。

【讨论】：

【解决方案6】：

您展示的 css 必须应用于块元素，例如 div。所以：

<div id="#rectangle"></div>

【讨论】：

我很确定这是个玩笑。 :)
A1rPun发烧了，唯一的药方就是多jQuery

【解决方案7】：

您需要确定您的部分，然后使用 CSS 设置它们的样式。在这种情况下，这可能会起作用：

HTML

<div id="blueRectangle"></div>

CSS

#blueRectangle {
    background: #4679BD;
    min-height: 50px;
    //width: 100%;
}

http://jsfiddle.net/7PJ5q/

【讨论】：

【解决方案8】：

在 HTML 页面中，您必须将 css 代码放在标签之间，而在正文中，有一个 id 为矩形的 div。代码如下：

<!doctype>
<html>
<head>
<style>
#rectangle 
{
   all your css code
}
</style>
</head>
<body>
<div id="rectangle"></div>
</body>
</html>

【讨论】：

【解决方案9】：

css:

.example {
    display: table;
    width: 200px;
    height: 200px;
    background: #4679BD;
}

html:

<div class="retangulo">
   
</div>

【讨论】：