如何在HTML或CSS中绘制矩形？

Question

如何在HTML或CSS中绘制矩形？

htmlcsscss-shapes

35

我想画一个矩形，找到了一个CSS代码的网站(http://css-tricks.com/examples/ShapesOfCSS/)，该怎么在HTML中使用呢？换句话说，我该如何定义HTML中的#rectangle。

Facebook每个页面上方都有一个蓝色的矩形。有什么最好的方法可以实现类似的效果吗？

如果有人能帮忙，我会非常感激。

- user3014926

21

嗯... <div></div>。 - Niet the Dark Absol

1

否则，您可以在HTML5中绘制它 http://www.w3schools.com/html/html5_canvas.asp - TekuConcept

6

默认情况下，每个 HTML 块级元素都是一个矩形。 - Kai Qing

9个回答

18

可缩放矢量图形

建议使用 SVG 来绘制图形元素，同时使用 CSS 来为这些元素添加样式。

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

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

- Persijn

1

这是唯一一个实际提供了<rect>元素的答案，这很可能是提问者想要的，而不是<div>元素。 - Michael Currie

14

使用 <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div> 可以创建一个蓝色矩形。

- JetMashKangaroo

7

为什么您使用内联CSS样式？ - display-name-is-missing

2

因此，一次性复制/粘贴非常容易。 - JetMashKangaroo

1

对于正确使用该网站的人来说，这是很好的。你不应该来这里学习CSS和HTML。虽然两者都是最好的选择。 - quemeful

7

我在我的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;">

这将生成一个带有圆角的盒子边框。您可以调整变量来实现不同的效果。

- BeenThere

7

为了在 Facebook 上模仿固定位置的矩形，可以尝试以下方法：

请参考下面的示例代码：

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

CSS

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

- display-name-is-missing

4

您所展示的 CSS 必须应用于块级元素，例如 div。因此：

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

- Yoann Augen

8

我很确定这只是一个玩笑。 :) - tjboswell

9

A1rPun 发烧了，唯一的处方是更多的 jQuery。 - Kai Qing

2

你需要识别你的部分，并使用CSS对它们进行样式设置。在这种情况下，这可能会起作用：

HTML

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

CSS

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

http://jsfiddle.net/7PJ5q/

- Mr. Mayers

2

在HTML页面中，您需要将CSS代码放置在<style>标签之间，而在body中则是一个ID为rectangle的div。以下是代码：

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

- user3005039

1

css：

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

html：

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

- Ryan Ruiz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tjboswell · Accepted Answer

Fiddle

HTML

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

CSS

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

我强烈建议您阅读有关CSS 选择器和HTML 基础知识的内容。