如何在 HTML 或 CSS 中绘制矩形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20690408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to draw a rectangle in HTML or CSS?
提问by user3014926
I am trying to draw a rectangle and I found the website for css code(http://css-tricks.com/examples/ShapesOfCSS/). How do I put together in HTML? In other words, how do I define #rectangle in HTML.
我正在尝试绘制一个矩形，但我找到了 css 代码的网站（http://css-tricks.com/examples/ShapesOfCSS/）。如何在 HTML 中组合在一起？换句话说，我如何在 HTML 中定义 #rectangle。
Facebook always has blue rectangle at the top of each page. What is the best way to achieve like them?
Facebook 在每个页面的顶部总是有蓝色矩形。像他们一样实现目标的最佳方法是什么？
I appreciate if someone could help me.
如果有人可以帮助我，我很感激。
回答by tjboswell
HTML
HTML
<div id="rectangle"></div>
CSS
CSS
#rectangle{
width:200px;
height:100px;
background:blue;
}
I strongly suggest you read about CSS selectorsand the basics of HTML.
回答by JetMashKangaroo
Use <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>
用 <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>
This will create a blue rectangle.
这将创建一个蓝色矩形。
回答by Persijn
SVG
SVG
Would recommend using svg for graphical elements. While using css to style your elements.
建议将 svg 用于图形元素。使用 css 设置元素样式时。
#box {
fill: orange;
stroke: black;
}<svg>
<rect id="box" x="0" y="0" width="50" height="50"/>
</svg>回答by display-name-is-missing
To mimic the rectangle with fixed position on facebook, try something like this:
要在 facebook 上模仿固定位置的矩形，请尝试以下操作：
<div id="rectangle"></div>
CSS
CSS
#rectangle {
width:100%;
height:60px;
background:#00f;
position:fixed;
top:0;
left:0;
}
回答by BeenThere
I do the following in my eBay listings:
我在 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;">
This produces a box border with rounded corners.You can play with the variables.
这会产生一个带圆角的框边框。您可以使用变量。
回答by Yoann Augen
the css you are showing must be applied to a block element, like a div. So :
您显示的 css 必须应用于块元素，如 div。所以 ：
<div id="#rectangle"></div>
回答by Ryan Ruiz
css:
css：
.example {
display: table;
width: 200px;
height: 200px;
background: #4679BD;
}
html:
html：
<div class="retangulo">
??
</div>
回答by user3005039
In the HTML page you have to to put your css code between the tags, while in the body a div which has as id rectangle. Here the code:
在 HTML 页面中，您必须将 css 代码放在标签之间，而在正文中则是一个具有 id 矩形的 div。这里的代码：
<!doctype>
<html>
<head>
<style>
#rectangle
{
all your css code
}
</style>
</head>
<body>
<div id="rectangle"></div>
</body>
</html>
回答by Mr. Mayers
You need to identify your sections and then style them with CSS. In this case, this might work:
您需要识别您的部分，然后使用 CSS 设置它们的样式。在这种情况下，这可能有效：
HTML
HTML
<div id="blueRectangle"></div>
CSS
CSS
#blueRectangle {
background: #4679BD;
min-height: 50px;
//width: 100%;
}
