"House-like" border in css - html

Question

I have a div with a simple border:
border: 10px solid #642850;
div {
border: 10px solid #642850;
height: 100px;
width: 100px;
}
<div></div>
I'm looking to create a shape like this:
What is the best way to achieve this?

Answer 1

try this one :
http://jsfiddle.net/sachinkk/L5zz1hak/2/
.sq {
border: 10px solid #642850;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
.tl {
position: absolute;
top: -33px;
left: -36px;
border-left: 10px solid #642850;
border-top: 10px solid #642850;
height: 76px;
width: 76px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 100% 100%;
}
<div class="sq">
<div class="tl"></div>
</div>

Answer 2

CSS
By using a pseudo-element and using css transforms, the desired shape can be accomplished.
div {
background: white;
border: 10px solid #642850;
width: 100px;
height: 100px;
margin-top: 75px;
positioN: relative;
}
div::before {
margin-top: -52px;
border: 10px solid #642850;
background: white;
content: '';
transform: rotate(45deg);
position: absolute;
top: 0;
left: 8px;
height: 64px;
width: 64px;
z-index: -2;
}
<div></div>
SVG
An alternative could be to use SVG to generate the shape you want. SVG's are responsive and well supported across browsers.
<svg width="50%" viewbox="0 0 100 100">
<polygon points="2,25 2,98 98,98 98,25 50,2z" fill="white" stroke-width="2" stroke="#642850"></polygon>
<polyline points="2,25 98,25" stroke="#642850" stroke-width="2"></polyline>
</svg>

Answer 3

Try this
.b{
width:200px;
height:100px;
overflow:hidden;
}
.b div{
width:200px;
height:200px;
transform:rotate(45deg);
content:"";
border:10px solid red;
margin-top:40px;
margin-left:-10px;
}
.a{
width:180px;
height:200px;
border:10px solid red;
margin-top:0px;
}
<div class="b"><div></div></div>
<div class="a"></div>

Answer 4

With one div and using generated content:
div {width:100px; height:100px; border:5px solid red; position:relative; margin-top:50px}
div:after,div:before {content:""; position:absolute; border:55px solid red; border-color:transparent transparent red transparent; border-width:40px 55px; bottom:105px; left:-5px}
div:after {border-color:transparent transparent white transparent; border-width:34px 48px; left:2px}
<div></div>

Answer 5

Try this solution:
.roof {
position: absolute;
top: calc(499px - 48px);
left: 899px;
height: 0;
width: 0;
border-left: 120px solid #f00;
border-top: 120px solid transparent;
transform: rotate(135deg);
}
.roofCovering {
position: absolute;
top: calc(499px - 48px + 5px);
left: 909px;
height: 0;
width: 0;
border-left: 100px solid #fff;
border-top: 100px solid transparent;
transform: rotate(135deg);
}
.house {
position: absolute;
top: calc(499px - 48px + 58px);
left: 874px;
height: 165px;
width: 160px;
border: 5px solid #f00;
}
<div class="roof"></div>
<div class="roofCovering"></div>
<div class="house"></div>