How to achieve chamfered CSS Border Corners rather than rounded corners?

Question

With the CSS border-radius property I can have a curvy, rounded border corner at the end.

.boxLeft{
             


        

Answer 1

Here's a way, although it does have some shortcomings, like no borders and it isn't transparent:

.left,
.right {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}

.left {
  background: lightpink;
}

.right {
  background: lightblue;
}

.right::after,
.left::after {
  width: 0px;
  height: 0px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: 0;
}

.right::after {
  left: 0;
  border-top: 10px solid lightblue;
  border-right: 10px solid lightblue;
  border-left: 10px solid white;
  border-bottom: 10px solid white;
}

.left::after {
  right: 0;
  border-top: 10px solid lightpink;
  border-right: 10px solid white;
  border-left: 10px solid lightpink;
  border-bottom: 10px solid white;
}

RESULT:

Here's a fiddle.