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

This is what you need, transparency and everything

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

.right::after,
.left::after {
  content: '';
  width: 200px;
  height: 200px;
  position: absolute;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.right::after {
  background: lightblue;
  left: -40px;
  top: -100px;
}

.left::after {
  background: lightpink;
  left: -60px;
  top: -100px;
}

<div class="left"></div>
<div class="right"></div>

Answer 2

I first tested @thordarson solution with position: 'absolute'.

position: 'absolute',
top: '2.9rem',
left: '2.6rem',
borderLeft: '1rem solid #6CAEC6',
borderBottom: '0.7rem solid white',

This worked fine on most devices as shown in the first picture but when used on iPhones or tablets weird lines started showing up:

As @Collins answer I then started using clip-path: polygon but I had quite a hard time getting the correct shapes. I then found a site that really helped me:

https://bennettfeely.com/clippy/

They offer ready shapes that can then be dragged to a desired shape.

For the corner that I needed I could then copy the correct values from the website.

A requirement for us was a 35° angle and to get that right I used the site:

https://www.ginifab.com/feeds/angle_measurement/

I have no affiliation with any of the sites, they just really helped me get what I wanted. With clip-path: polygon and -webkit-clip-path: polygon it worked on all devices and browsers that we had as a requirement.

Compatibility check:

https://caniuse.com/#feat=css-clip-path