All geek questions in one place

CSS and HTML square background

Can someone guide me, how can I create an “almost” square background in CSS?

I want to get a brown background and text on it with errors and how to create a dotted yellow from the top right in CSS?

My work progress is here:

HTML:

<body> <div id="contentContainer"> <div id="setBackground"> <div id="header"> <span class="style1">This is LOGO </span> <hr /> <div id="body_block"> <p class="intro">Introduction</p> <h1> Back </h1> Click Here <h2> Next </h2> Click Here <p>More about Web Design:</p> <p>• Bla bla bla... .</p> <p>Contact:</p> <p>• Bla bla bla...</p> <div id="footer"> <!--hr class="footer"/--> <p>&copy; Copyright 2013 <a href="">sample.com </a>| <a href="">More Site </a> </p> </div> </div> </div> </div> </div> </body>

CSS

 @charset"UTF-8"; /* CSS Document */ hr { clear:both; border: 0; height:12px; width:100%; background-color: #993300; } .intro { color: #1e2a74; font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; } #footer { background-color:#6994AF; clear: both; color: #FFFFFF; font-size: 0.8em; margin: 0; padding: 0; font-family:Arial, Helvetica, sans-serif; } #footer p { border-top: 1px solid #83CDE1; margin: 0; padding: 15px 0; text-align: left; } #footer a { text-align:right; } .style1 { font-size: 24px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; }
+4
source share
6 answers

the CSS attribute of the border radius can help you get rounded corners - in particular, something like this should do the trick for the pink element containing everything else.

 div { /* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */ border-radius: 20px 5px 20px 5px; }

I personally would break it down into several divs, a title and a body. put the background yellow dots with color in the top div and apply the border radius to the tops.

then put the contents of the other divs in the body and apply these border styles for each case.

this, however, is just one way to do this. I am sure there are many other ways.

more CSS info Rounded borders here

+1
source

Here jsFiddle

Your design is really poor. You do not need to embed all divs inside each other. I changed your html a bit (just rebuilt your divs and added two new divs leftDiv and rightDiv ) HTML:

 <body> <div id="contentContainer"> <div id="setBackground"> <div id="header"> <span class="style1">This is LOGO </span> <hr /> </div> <div id="body_block"> <p class="intro">Introduction</p> <h1> Back </h1> Click Here <h2> Next </h2> Click Here </div> <div id="leftDiv"> <p>More about Web Design:</p> <p>• Bla bla bla... .</p> </div> <div id="rightDiv"> <p>Contact:</p> <p>• Bla bla bla...</p> </div> <div id="footer"> <!--hr class="footer"/--> <p> &copy; Copyright 2013 <a href="">sample.com </a>| <a href="">More Site </a> </p> </div> </div> </div> </body>

Add these rules to your CSS:

 #leftDiv{ clear:both; width:200px; background:brown; float:left; border-top-left-radius:25px; } #rightDiv{ margin-left:20px; border-bottom-right-radius:25px; background:brown; float:left; }
0
source

Try it.

  border-bottom-right-radius:20px;
0
source

The border radius is what you want to see: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

In your case, it will look something like this:

 border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */

http://jsfiddle.net/spKMM/

0
source

Try radius radius properties

Example 1

Div {border radius: 10px;}

Example 2

Div {border-radius: 10px 15px;}

For more information, visit: - CSS-TRICKS

0
source

How about this ? You can create a "pseudo" "hr" tag using div: P

 //IN HTML <div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div> //AND IN CSS #CUSTOM_HR_WITH_TEXT { border-radius: 10px 10px 10px 10px; border: 0; height: auto; width: auto; background-color: #993300; color: #fff; text-align: center; }
0
source

Source: https://habr.com/ru/post/1481576/

More articles:


All Articles