CSS自定义彩色边框

Question

我想创建div的右上边框，例如以下picture

我对CSS很陌生。谁能给我一个指向这个的指针？

Answer 1

您可以使用绝对位置:: after伪元素（或标记中的元素）来创建绿色区域。设置右上边界半径和overflow: hidden;将完成工作。

body {
  background: #ddd;
}

div {
  background: white;
  width: 100px;
  height: 50px;
}

.funky-border {
  border-top-right-radius: 30px;
  position: relative;
  overflow: hidden;
}
.funky-border:after {
content:'';
background: green;
width: 20px;
height: 60px;
transform: rotate( 135deg );
position: absolute;
top: -20px;
right: 0;
}

<div class="funky-border"></div>

Answer 2

这是使用一个元素的简单方法：

.box {
  width:200px;
  height:100px;
  border-top-right-radius:30px;
  background:
    linear-gradient(to top right,transparent 49%,green 50%) top right/50px 50px no-repeat,
    gray;
}

<div class="box">

</div>