div一侧的对角线边框

Question

Click for the problem's illustration

鉴于背景不牢固，我该如何实现呢？我尝试了不同的解决方案，但没有一个完全适合

Answer 1

像这样开始，

<div id="box">
   <div id="rectangle"></div>
</div>

<强> CSS

#box {
  height: 100px;
  width: 400px;
  overflow: hidden;
  background-color: black;
}

#rectangle { 
   width: 0; 
   height: 0; 
   border-top: 100px solid transparent; 
   border-right: 300px solid white;
}