web-dev-qa-db-ja.com

HTMLまたはCSSで長方形を描く方法は？

私は長方形を描画しようとしていますが、CSSコードのウェブサイトを見つけました（ http://css-tricks.com/examples/ShapesOfCSS/ ）。 HTMLにまとめるにはどうすればよいですか？つまり、HTMLで#rectangleを定義するにはどうすればよいですか。

Facebookでは、各ページの上部に常に青い長方形があります。それらのように達成するための最良の方法は何ですか？

誰かが私を助けてくれれば幸いです。

htmlcsscss-shapes
22
user3014926

フィドル

HTML

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

CSS

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

CSSセレクター および HTMLの基本 について読むことを強くお勧めします。

40
tjboswell

つかいます <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>

これにより、青い長方形が作成されます。

12
JetMashKangaroo

SVG

グラフィカル要素にはsvgを使用することをお勧めします。 cssを使用して要素をスタイルしている間。

#box {
  fill: orange;
  stroke: black;
}
<svg>
  <rect id="box" x="0" y="0" width="50" height="50"/>
</svg>
8
Persijn

表示するCSSは、divなどのブロック要素に適用する必要があります。そう ：

<div id="#rectangle"></div>
4
Yoann Augen

私は私の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;">

これにより、角が丸いボックスの境界線が作成されます。変数で遊ぶことができます。

4
BeenThere

Facebookの固定位置で長方形を模倣するには、次のようなものを試してください。

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

[〜＃〜] css [〜＃〜]

#rectangle {
    width:100%;
    height:60px;
    background:#00f;
    position:fixed;
    top:0;
    left:0;
}
4
display-name-is-missing

HTMLページでは、タグの間にcssコードを配置する必要がありますが、本文には、idの長方形としてdivがあります。ここにコード：

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

css：

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

html：

<div class="retangulo">
   
</div>
2
Ryan Ruiz

セクションを特定し、CSSでスタイルを設定する必要があります。この場合、これはうまくいくかもしれません：

HTML

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

CSS

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

http://jsfiddle.net/7PJ5q/

1
Mr. Mayers