3
votes

Comment créer un triangle rectangle avec un arrière-plan dégradé linéaire?

Je souhaite créer un triangle rectangle avec une couleur d'arrière-plan à dégradé linéaire. Est-ce possible d'utiliser CSS?

Voici mon code pour un triangle rectangle avec une seule couleur de fond. Le même code est également disponible ici 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>

J'ai besoin que mon triangle ait un arrière-plan dégradé linéaire transformant l'orange en rouge de gauche à droite. L'environnement de mon triangle doit être transparent.

html css

0 commentaires

4 Réponses :

5
votes

Je suggère d'utiliser la propriété clip-path à la place, afin que vous puissiez réduire et nettoyer le balisage et utiliser facilement un gradient linéaire comme arrière-plan

Démo Codepen

<span class="triangle"></span>

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

En remarque, j'ai utilisé max-width au lieu de width , juste pour vous montrer comment vous pourriez le rendre réactif. p>

2 commentaires

Ce n'est pas compatible avec tous les navigateurs. clip-path ne prend pas en charge dans safari

@GauravSaraswat il est pris en charge à partir de Safari 7 avec le préfixe -webkit-

0
votes

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

I ont créé le triangle rectangle dégradé de couleur d'arrière-plan.

Veuillez vérifier ci-dessous 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 ); 
}

0 commentaires

3
votes

Je pense que vous recherchez la propriété border-image :

border-image: linear-gradient (en haut à droite, orange, rouge 50%, transparent 51%, transparent ); devrait fonctionner

Solution de démonstration:

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

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

0 commentaires

1
votes

Vous pouvez également envisager plusieurs arrière-plans pour créer le triangle mais sans transparence. L'astuce consiste à avoir un triangle en haut du dégradé ayant la même couleur que l'arrière-plan principal:

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

svg {
  width:300px;
}

Une autre idée avec transformation oblique et débordement où vous aurez de la transparence:

<div class="triangle"></div>

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

Vous avez également la solution SVG:

<div class="triangle"></div>

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

1 commentaires

plusieurs arrière-plans est une idée inspirante, +1