Diagonal border on one side of a div

Question

How should I implement this, given the fact that the background is not solid? I was trying different solutions, but none of them fully fit

How ?' many ways ... use border-values to make the diagonal --- use a pseudo-element to fake the diagonal .... skew transform a bg element .... Try something and show us the code you try — DaniP, Oct 11 '16 at 16:21

score 3 · Answer 1 · answered Oct 11 '16 at 16:22

Start like this,

<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;
}

Diagonal border on one side of a div

1 Answers1