CODEWITHSUNDEEP
htmlcss
user9254958
user9254958

Reputation:

How to create a right triangle which has linear-gradient background?

I want to create a right triangle with a linear-gradient background color. Is it possible using CSS?

Below is my code for a right triangle with a single background color. The same code is also available here https://codepen.io/anon/pen/BMqVbL?editors=1100

<style>
body {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: lightgrey;
}

.wrapper {
  width: 760px;
  height: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.triangle {
  border-right-width: 760px;
  border-bottom-width: 35px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-right-style: solid;
  border-bottom-color: red;
  border-right-color: transparent;
}
</style>    

<body>
<div class="wrapper">
   <div class="triangle"><!-- ### --></div>
</div>
</body>

I need my triangle to have a linear-gradient background transforming orange into red from left to right. The surroundings of my triangle have to be transparent.

Upvotes: 3

Views: 907

Answers (4)

Temani Afif
Temani Afif

Reputation: 272723

You can also consider multiple background to create the triangle but without transparency. The trick is to have a triangle on the top of the gradient having the same color as the main background:

.triangle { 
  max-width: 300px;
  height: 50px;
  background: 
    linear-gradient(to top right,transparent 49%,#fff 50%),
    linear-gradient(to right, blue, red);
}
<div class="triangle"></div>

Another idea with skew transformation and overflow where you will have transparency:

.triangle { 
  max-width: 300px;
  height: 50px;
  overflow:hidden;
}
.triangle:before {
  content:"";
  display:block;
  height:100%;
  width:100%;
  background: linear-gradient(to right, blue, red);
  transform-origin:left;
  transform:skewY(10deg);
}
<div class="triangle"></div>

You have also the SVG solution:

svg {
  width:300px;
}
<svg viewBox="0 0 300 100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points='0,0 300,100 0,100' fill="url(#grad)" />
</svg>

Upvotes: 1

Gaurav Saraswat
Gaurav Saraswat

Reputation: 1383

I think you are looking for border-image property:

border-image: linear-gradient(to top right, orange, red 50%, transparent 51%, transparent); should work

Demo solution:

.triangle {
    border-right-width: 760px;
    border-bottom-width: 35px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom-style: solid;
    border-right-style: solid;
    border-bottom-color: red;
    border-right-color: transparent;
    border-image: linear-gradient(to right top, orange, red 50%, transparent 51%, transparent);
}
<div class="wrapper">
  <div class="triangle"><!-- ### --></div>
</div>

Upvotes: 3

Vaneet Thakur
Vaneet Thakur

Reputation: 89

https://codepen.io/vaneetthakur/pen/jdepLx

I have created the right triangle gradient background-color.

Please check below Code -

<div class="gradient-block"></div>

.gradient-block{
    width:200px;
    height:180px;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 59%);
    clip-path: polygon(0 0, 0% 100%, 100% 59%);
    display:inline-block;
    background: #8c3310; /* Old browsers */
    background: -moz-linear-gradient(top, #8c3310 0%, #bf6e4e 100%); 
    background: -webkit-linear-gradient(top, #8c3310 0%,#bf6e4e 100%);
    background: linear-gradient(to bottom, #8c3310 0%,#bf6e4e 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3310', endColorstr='#bf6e4e',GradientType=0 ); 
}

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

I'd suggest to use the clip-path property instead, so you can reduce and clean the markup and easily use a linear-gradient as the background

Codepen demo

.triangle {
  display: block;
  max-width: 760px;
  height: 35px;
  background: linear-gradient(to right, orange, red);
  clip-path: polygon(0 0, 100% 100%, 0 100%)
}
<span class="triangle"></span>

As a side note, I've used max-width instead of width, just to show you how you could make it responsive.

Upvotes: 5

Related Questions