css 不规则边角,如何实现倒角CSS边框角而不是圆角？

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

.boxLeft{

border-right: 1px dashed #333;

border-bottom: 1px dashed #333;

border-radius: 0 0 10px 0;

}

.boxRight{

border-left: 1px dashed #333;

border-bottom: 1px dashed #333;

border-radius: 0 0 0 10px;

}

But I want a border corner like the image below. If I have two boxes (Yellow & Pink) meeting each other and I want a harsh corner at the bottom meeting point (dotted corner), what should I do?

Is that possible using CSS?

解决方案

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

HTML:

CSS:

.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: