SVG

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 selectors和the basics of HTML。

Answer 2

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

这将创建一个蓝色矩形。

Answer 3

SVG

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

＆＃13;

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

＆＃13;

Answer 4

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

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

Answer 5

要模仿Facebook上固定位置的矩形，请尝试以下方法：

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

<强> CSS

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

Answer 6

我在易趣物品列表中执行以下操作：

<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 7

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

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

Answer 8

的CSS：

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

HTML：

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

Answer 9

您需要识别您的部分，然后使用CSS设置它们的样式。在这种情况下，这可能有效：

HTML

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

CSS

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

http://jsfiddle.net/7PJ5q/

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

9 个答案:

SVG