"House-like" border in css

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>