web-dev-qa-db-fra.com

comment dessiner un rectangle en HTML ou CSS?

J'essaie de dessiner un rectangle et j'ai trouvé le site Web pour le code CSS ( http://css-tricks.com/examples/ShapesOfCSS/ ). Comment puis-je assembler en HTML? En d'autres termes, comment définir #rectangle en HTML?.

Facebook a toujours un rectangle bleu en haut de chaque page. Quelle est la meilleure façon de réaliser comme eux?

J'apprécie que quelqu'un puisse m'aider.

htmlcsscss-shapes
22
user3014926

violon

HTML

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

CSS

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

Je vous suggère fortement de lire à propos de sélecteurs CSS et les bases du HTML .

40
tjboswell

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

Cela va créer un rectangle bleu.

12
JetMashKangaroo

SVG

Recommanderais d'utiliser svg pour les éléments graphiques. Tout en utilisant CSS pour le style de vos éléments.

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

le css que vous montrez doit être appliqué à un élément de bloc, comme un div. Alors :

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

Je fais ce qui suit dans mes annonces 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;">

Cela produit une bordure de boîte avec des coins arrondis.Vous pouvez jouer avec les variables.

4
BeenThere

Pour imiter le rectangle à position fixe sur Facebook, essayez quelque chose comme ceci:

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

CSS 

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

Dans la page HTML, vous devez mettre votre code CSS entre les balises, tandis que dans le corps, un div qui a pour rectangle id. Voici le code:

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

Vous devez identifier vos sections, puis les styler avec CSS. Dans ce cas, cela pourrait fonctionner:

HTML

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

CSS

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

http://jsfiddle.net/7PJ5q/

1
Mr. Mayers