House shape using css and div

1

hi guys, please how do i add windows and door to my house. here is my code:

Building a House 
<div class="container">
	<div class="house">
		<div class="shape"></div>
		<div class="shape:before"></div>
	</div>
</div>

.shape {
background: red;
display: inline-block;
height: 110px;
margin-left: 70px;
margin-top: 105px;
position: relative;
width: 210px;
}

.shape:before {
border-bottom: 80px solid red;
border-left: 100.90px solid transparent;
border-right: 100px solid transparent;
content: “”;
height: 0;
left: 0;
position: absolute;
top: -80px;
width: 0;
}

  • {
    margin: 0 auto;
    text-align: center;
    }

html, body {
max-width: 1000px;
max-height: 1000px;
background: #009688;
}

2

Hi

Inside your shape div(which is already relative), create another div and call it window or door.

In css, style that class something like this,

.door{
position: absolute; ------this is the important property 
left: 10px; ------play with this
top: 10px; ------play with this
height: 100px;
width: 50px;
}

that should get you started.

To position something like that, you are required to position something absolutely, inside another positioned element (either relative or absolute) and then specify its location within that element using top/bottom/left/right properties.

Cheers

Mark

3

Thank you very much Mark :))

4

No probs,

You’re going to run into problems with your html there too.

the :before psuedo class is not intended to be used outside of CSS. Not something I fully understand myself yet, so i’l leave it to CSS tricks to explain :slight_smile:

5

Thank you very much, Mark.
It’s very helpful.
i have managed to create windows and doors, just playing around with height and width :slight_smile: xx