How to fix the triangle alignment issue and i don't what wrong in my code

Question

I have to draw half diagonal triangle in card i tried but i don't know how to bring the exact output as shown in this image and i have uploaded my code too, so please if anyone know how to achieve as same like image please let me know for reference i have upload the excepted output image here Output

.cards{
    border-bottom: 148px solid red;
    border-left: 158px solid transparent;
}
.empty-space-section6 {
    height: 411px;
    width: 230px;
    border-color: gray;
    margin-left: 20px;
    margin-top: 16.5px;
    margin-bottom: 52.5px;
    background-color: #FFFBE2;
}

<div class="empty-space-section6">
      <div class="cards">
        
      </div>
    </div>

check the background solution, don't consider border – Temani Afif Feb 21 '19 at 10:41 — Temani Afif, Feb 21 '19 at 10:41

score 0 · Answer 1 · answered Feb 21 '19 at 10:35

You need to increase border width and set alignment to right to achieve this. Check updated snippet below:

.cards {
    border-bottom: 180px solid red;
    border-left: 280px solid transparent;
    float: right;
}
.empty-space-section6 {
    height: 411px;
    width: 230px;
    border-color: gray;
    margin-left: 20px;
    margin-top: 16.5px;
    margin-bottom: 52.5px;
    background-color: #FFFBE2;
    overflow: hidden;
}

<div class="empty-space-section6">
  <div class="cards">
  </div>
</div>

score 0 · Answer 2 · answered Feb 21 '19 at 10:38

You can work with positioning to achieve this.

.cards{
    border-bottom: 248px solid red;
    border-left: 358px solid transparent;
    position: absolute;
    bottom: 0;
    left: -50px;
}
.empty-space-section6 {
    height: 411px;
    width: 230px;
    border-color: gray;
    margin-left: 20px;
    margin-top: 16.5px;
    margin-bottom: 52.5px;
    background-color: #FFFBE2;
    position: relative;
    overflow: hidden;
}

<div class="empty-space-section6">
      <div class="cards">
        
      </div>
    </div>

score 0 · Answer 3 · answered Feb 21 '19 at 10:39

I would consider to use instead a simple linear-gradient as the background so you wouldn't need to mess with borders. e.g.

article {
  width: 240px;
  height: 360px;
  box-shadow: 0 0 5px #999;
  background: linear-gradient(-25deg, #9864bb 160px, #ffffff 162px);
}

<article></article>

In this example the gradient starts from bottom to top but of course you can change how it is anchored and the color-stop values.

How to fix the triangle alignment issue and i don't what wrong in my code

3 Answers3