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

Question

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

Facebook的每页顶部都有蓝色矩形.实现这些目标的最佳方式是什么？

如果有人能帮助我,我感激不尽.

Answer 1

小提琴

HTML

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

CSS

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

我强烈建议您阅读CSS选择器和HTML的基础知识.

Answer 2

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

这将创建一个蓝色矩形.

Answer 3

SVG

建议使用svg作为图形元素.使用css来设计元素的样式.

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

Answer 4

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

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

Answer 5

要模仿在Facebook上具有固定位置的矩形，请尝试如下操作：

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

的CSS

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

Answer 6

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

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