通过border实现div角颜色

Question

怎么通过border样式来设置上图左上角或者右上角的这种样式啊？只实现左上角和右上角的样式，

只有一个div，不是通过两个div来设置背景色+圆角实现

Answer 1

可以通过足够大的 box-shadow 和 clip-path 裁剪实现

.box{
  border: 1px solid red;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 0 10px red;
  clip-path: inset(0 0 0 0);
}

https://codepen.io/xboxyan/pe...

Answer 2

加个:before

预览：demo 传送门

<div id="border"></div>
// css
/* 圆角 */
#border {
  border: 1px solid #ff0000;
  width: 400px; 
  height: 100px;
  position: absolute;
  background-color: red;
}

#border:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -1px;
  top: -1px;
  left: -1px;
  right: -1px;
  border-radius: 20px 20px 0 0;
  border: 1px solid #ff0000;
  background-color: rgb(255, 255, 255);
}