在这种情况下增加边框权会发生什么情况？

Question

我正在努力做到这一点：

这是代码：

#wrapper {
  height: 600px;
  width: 30%;
  position: relative;
  backgroundColor: #F7524C;
  border-radius: 10px;
}

#cutShape {
    background-color: transparent;
    height: 600px;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-right: 416px solid blue;
    border-top: 300px solid transparent;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

<div id="wrapper">
  <div id="cutShape" />
</div>

当我将右边框的宽度增加到超过416像素以匹配包装器宽度（即426）以消除左侧的红色小块时，整个div就会变成蓝色。有帮助吗？

Answer 1

您可以简化此过程并使用简单的渐变着色：

.box {
  width:150px;
  height:200px;
  border-radius:10px;
  background: 
    /*                                                  position/width height */
    linear-gradient(to top left,transparent 49%,#F7524C 50%) top/100% 50% no-repeat,
    blue;
}

<div class="box">

</div>

具有两个元素：

.box {
  width:150px;
  height:200px;
  border-radius:10px;
  background: #F7524C;
}
.box > div {
  width:100%;
  height:100%;
  border-radius:inherit;
  background: 
    linear-gradient(to bottom right,transparent 49%,blue 50%) top/100% 50%,
    linear-gradient(blue,blue) bottom/100% 50.5%;
  background-repeat:no-repeat;
}

<div class="box">
   <div></div>
</div>