Clever Geek Handbook

"House-like" border in css

I have a div with a simple border:

border: 10px solid #642850; 

      

        
        
        
      

    

div {
  border: 10px solid #642850;
  height: 100px;
  width: 100px;
}
      

        
        
        
      

    
<div></div>
Run codeHide result


I want to create a form like this:

Example

What is the best way to achieve this?

+3


source to share


4 answers


try this: 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>
Run codeHide result


+3


source


CSS

By using pseudo-element

and using css transforms the desired shape can be done.

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>
Run codeHide result




SVG

An alternative would be to use SVG to generate the desired shape. SVGs 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>
Run codeHide result


+3


source


try it

.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>
Run codeHide result


+2


source


With one div and 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>
Run codeHide result


+2


source






More articles:


All Articles