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?
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>