CODEWITHSUNDEEP
htmlcsscss-shapes
user3014926
user3014926

Reputation: 1099

how to draw a rectangle in HTML or CSS?

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.

Upvotes: 35

Views: 278485

Answers (10)

Hardik Solgama
Hardik Solgama

Reputation: 13

It's important to recognize your sections and style them using CSS. This scenario has the possibility of working:

.box {
   margin-top:1rem;    
   background: blue;
   border-radius: 8px;
   padding-bottom: 100%;
}
 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-2 col-xs-2">
            <div class="box"></div>
        </div>
    </div>
</div>

Upvotes: 0

Persijn
Persijn

Reputation: 14990

SVG

Would recommend using svg for graphical elements. While using css to style your elements.

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

Upvotes: 20

Ryan Ruiz
Ryan Ruiz

Reputation: 19

css:

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

html:

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

Upvotes: 1

display-name-is-missing
display-name-is-missing

Reputation: 4399

To mimic the rectangle with fixed position on facebook, try something like this:

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

CSS

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

Upvotes: 7

tjboswell
tjboswell

Reputation: 903

Fiddle

HTML

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

CSS

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

I strongly suggest you read about CSS selectors and the basics of HTML.

Upvotes: 61

BeenThere
BeenThere

Reputation: 71

I do the following in my eBay listings:

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

This produces a box border with rounded corners.You can play with the variables.

Upvotes: 7

user3005039
user3005039

Reputation: 27

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:

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

Upvotes: 2

Mr. Mayers
Mr. Mayers

Reputation: 356

You need to identify your sections and then style them with CSS. In this case, this might work:

HTML

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

CSS

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

http://jsfiddle.net/7PJ5q/

Upvotes: 2

JetMashKangaroo
JetMashKangaroo

Reputation: 151

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

This will create a blue rectangle.

Upvotes: 14

Yoann Augen
Yoann Augen

Reputation: 2036

the css you are showing must be applied to a block element, like a div. So :

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

Upvotes: 4

Related Questions