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.
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>
thanks a lot for this!