how to draw a rectangle in HTML or CSS

Question

I am trying to draw a rectangle and I found the website for css code http   css-tricks com examples ShapesOfCSS    How do I put together in HTML  In other words  how do I define  rectangle in HTML   Facebook always has blue rectangle at the top of each page  What is the best way to achieve like them   I appreciate if someone could help me

User · Answer

I do the following in my eBay listings    lt 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   gt    This produces a box border with rounded corners You can play with the variables

User · Answer

You need to identify your sections and then style them with CSS   In this case  this might work   HTML   lt div id  blueRectangle  gt  lt  div gt    CSS   blueRectangle       background   4679BD      min-height  50px        width  100       http   jsfiddle net 7PJ5q

User · Answer

In the HTML page you have to to put your css code between the  tags  while in the body a div which has as id rectangle  Here the code    lt  doctype gt   lt html gt   lt head gt   lt style gt   rectangle       all your css code    lt  style gt   lt  head gt   lt body gt   lt div id  rectangle  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Use  lt div id  rectangle  style  width number px  height number px  background-color blue  gt  lt  div gt    This will create a blue rectangle

User · Answer

the css you are showing must be applied to a block element  like a div  So     lt div id   rectangle  gt  lt  div gt

User · Answer

Fiddle  HTML   lt div id  rectangle  gt  lt  div gt    CSS   rectangle      width 200px      height 100px      background blue      I strongly suggest you read about CSS selectors and the basics of HTML

User · Answer

css    example       display  table      width  200px      height  200px      background   4679BD      html    lt div class  retangulo  gt         lt  div gt

User · Answer

To mimic the rectangle with fixed position on facebook  try something like this    lt div id  rectangle  gt  lt  div gt    CSS   rectangle       width 100       height 60px      background  00f      position fixed      top 0      left 0

User · Answer

SVG  Would recommend using svg for graphical elements  While using css to style your elements    x000D   x000D   box   x000D    fill  orange  x000D    stroke  black  x000D    x000D   lt svg gt  x000D     lt rect id  box  x  0  y  0  width  50  height  50   gt  x000D   lt  svg gt  x000D   x000D   x000D

[html] how to draw a rectangle in HTML or CSS?

Examples related to html

Examples related to css

Examples related to css-shapes