How to create multiple elements using only one div?

HTML & CSS
1

Hi fellas, how to create something like this below, using only one div and elements CSS3?

edit: It is as if they were three boxes on top of one another, but using only one div.

2

Hi,

If its just for a pretty effect then you can do it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test1{
	width:300px;
	height:300px;
	border:20px solid lightgreen;
	outline: 20px solid brown;
	background:#fcf;
	margin:30px;	
}
.test2{
	width:300px;
	height:300px;
	border: 20px solid brown;
	background:lightgreen;
	margin:10px;	
	padding:20px;
	position:relative;
}
.test2:after{
	content:" ";
	position:absolute;
	top:20px;
	bottom:20px;
	left:20px;
	right:20px;
	background:#fcf;	
}


</style>
</head>

<body>
<div class="test1"></div>
<div class="test2"></div>

</body>
</html>

Or you could use box-shadow for multiple borders.

3

But in this case, you’re using two divs test1 and test2, isn’t possible create using only one?

4

It is one div, Paul has two to show you two possible techniques. There should be two boxes showing up in the test, both doing what you want but in different ways. The second way won’t work in IE7.

5

Oh, sorry! Now I understand why he put two squares and my figure only shows one. ashamed

6

Thanks for explaining Mallory :slight_smile: