css 画凹角 |打开css样式面板快捷键

/*定义一个带竖直渐变边框的div*/
div{
border: 30px solid;
border-image: linear-gradient(to right, white, black) 1 ;
width: 200px;
height: 200px;
}
/*将左右边框设置为透明，并通过z-index将左边框放在上层*/
div:before,
div:after{
content: "";
position: absolute;
top: -30px;
bottom: -30px;
width: 30px;
z-index: 1;
background: transparent;
border: 30px solid;
border-image: linear-gradient(to bottom, white, black) 1 ;
}
/*将左边框定位在左上角，右边框定位在右上角*/
div:before{
left: -30px;
}
div:after{
right: -30px;
}

上述代码中，先定义一个带竖直渐变边框的 div 元素，然后通过伪元素添加左右两个边框，将左右边框设置为透明，并通过 z-index 将左边框放在上层，实现凹角效果。

可以根据需要调整 border 和 border-image 的属性值，以及 div 元素的宽度和高度来制作不同大小和样式的凹角。