html - 在这种情况下，当我增加 border-right 时会发生什么？

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>

当我将 border-right 增加超过 416px 以匹配 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>