A

10

34

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.

Attack answered 19/12, 2013 at 19:47 Comment(3)

Uh... <div></div>. – Albertype 19/12, 2013 at 19:49

Otherwise, you could draw it in HTML5 w3schools.com/html/html5_canvas.asp – Cotsen 19/12, 2013 at 19:50

You know by default every html block level element is a rectangle. – Namedropping 19/12, 2013 at 19:54

C

61

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.

Coercive answered 19/12, 2013 at 19:52 Comment(3)

Thank you very much. #rectangle acts like a method in Java, correct? – Attack 19/12, 2013 at 19:56

I'm not sure what you mean, HTML and CSS are not programming languages and do not have methods or functions. CSS is just applying a certain style to the element with the id "rectangle". I guess in a way it is "calling" the #rectangle "method"... – Coercive 19/12, 2013 at 20:0

For empty rectangles - jsfiddle.net/afj9eu4r – Electroplate 13/9, 2022 at 23:29

M

19

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>

Melodymeloid answered 6/5, 2015 at 9:45 Comment(1)

This is the only answer that actually gives a <rect> element, which is presumably what the questioner wanted, not a <div> element. – Beedon 5/6, 2017 at 0:37

C

14

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

This will create a blue rectangle.

Cytolysis answered 19/12, 2013 at 19:52 Comment(3)

Y u use inline CSS-style? – Telescope 19/12, 2013 at 19:52

So it is easy to copy/paste in one go – Cytolysis 21/12, 2013 at 17:57

for the ones using this site correctly. this is good. you shouldn't come here to learn CSS and HTML anyways. although both options would be the best. – Engud 20/11, 2014 at 20:40

T

7

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

Telescope answered 19/12, 2013 at 19:55 Comment(0)

E

7

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.

Endothermic answered 16/3, 2015 at 23:11 Comment(0)

R

4

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

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

Russellrusset answered 19/12, 2013 at 19:51 Comment(2)

I'm pretty sure it was a joke. :) – Coercive 19/12, 2013 at 19:53

A1rPun has a fever and the only prescription is more jQuery – Namedropping 19/12, 2013 at 19:54

S

2

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/

Shorttempered answered 19/12, 2013 at 19:54 Comment(0)

B

2

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>

Bim answered 19/12, 2013 at 19:54 Comment(0)

V

1

css:

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

html:

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

Vancevancleave answered 20/12, 2017 at 1:11 Comment(0)

M

0

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>

Monreal answered 23/7 at 9:11 Comment(0)

SVG

Recommended topics

Hot tags