CODEWITHSUNDEEP
csslinear-gradients
Bavi Gurunath
Bavi Gurunath

Reputation: 83

Draw top left triangle with linear-gradient and put it in a container

How to draw the same triangle below using linear-gradient? I've tried different solutions, but none of them work if you put it in the container, like in my example

.card {
  background-color: black;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
}
.card::before {
    content: '';
    position: absolute;
    border-top: 12rem solid #fff;
    border-right: 6.813rem solid transparent;
    height: 0;
    left: 0;
    opacity: .3;
    width: 0;
  }

.card-title {
  background-color: grey;
  height: 3.688rem;
}
<div class="card">
  <div class="card-title"></div>
</div>

Expected result:

enter image description here

Upvotes: 0

Views: 415

Answers (3)

Asons
Asons

Reputation: 87191

By using color stops for the gradient, and an angle, you can control pretty much exact where/how it should be drawn

.card {
  background-color: #444;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden
}

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(-60deg, rgba(0,0,0,0.15) 60%, transparent 40%);
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.card-title {
  background-color: #F1D773;
  height: 3.688rem;
}
<div class="card">
  <div class="card-title"></div>
</div>

You can use both the pseudo and get different gradients on the yellow and gray backgrounds

.card {
  background-color: #444;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden
}

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(-60deg, #E9BF21 34%, transparent 34%);
  height: 3.688rem;
  left: 0;
  top: 0;
  width: 100%;
}

.card::after {
  content: '';
  position: absolute;
  background: linear-gradient(-60deg, black 60%, transparent 40%);
  bottom: 0;
  left: 0;
  top: 3.688rem;
  width: 100%;
}

.card-title {
  background-color: #F1D773;
  height: 3.688rem;
}
<div class="card">
  <div class="card-title"></div>
</div>

Upvotes: 1

semuzaboi
semuzaboi

Reputation: 5172

The linear-gradient solution can be easily achieved by making a small tweak to your card:before class

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(to top left, transparent 50%, #ccc);
  height: 100%;
  left: 0;
  top:0;
  width: 100%;
}

This will result in a gradient that goes from bottom right To top left with a grey color stop.

I suppose you may need to tweak the gradient a bit, in case images are involved as per your post ! :)

.card {
  background-color: black;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(to top left, transparent 50%, #ccc);
  height: 100%;
  left: 0;
  width: 100%;
}

.card-title {
  background-color: grey;
  height: 3.688rem;
}
<div class="card">
  <div class="card-title"></div>
</div>

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option of updating border-right

border-right: 10.553rem solid transparent;

.card::before {
    content: '';
    position: absolute;
    border-top: 12rem solid #fff;
    border-right: 10.553rem solid transparent;
    height: 0;
    left: 0;
    opacity: .3;
    width: 0;
  }


https://codepen.io/nagasai/pen/RVLKrJ

Upvotes: 0

Related Questions