Triangles at the corners of a DIV

Question

I am trying to build a DIV with cut corners, like so:

I only managed to do the top right corner using a tutorial and here is the code:

.lifeatblock {
background-color: #435973 !important;
position:relative;
}

.lifeatblock:after {
content: '';
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #fff transparent transparent;
width: 0;
height: 0;
right: 0;
top: 0;
position: absolute;
}

I've tried building the bottom left corner using :before and I've failed. Does anyone know how I can do this? Thanks.

What do you mean by failed? – Taylor A. Leach Jul 03 '19 at 14:07 — Taylor A. Leach, Jul 03 '19 at 14:07

score 1 · Accepted Answer · answered Jul 03 '19 at 14:16

it can be done with pseudo element like this!

*{
  margin:0;
  padding:0;
}
.box{
  background-color:blue;
  width:400px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.box:before, .box:after{
        content:"";
        position:absolute;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 30px solid white;
    }
 .box:before{
   transform:rotate(-135deg);
     left:-20px;
   bottom:-12.5px;
} .box:after{
   transform:rotate(45deg);
     right:-20px;
   top:-12.5px;
}

<div class="box"></div>

Triangles at the corners of a DIV

1 Answers1