[S'inspirer] Postez votre Plan / Design

[kevvv31]

Salut à tous,

Cela fait maintenant plusieurs années que Jeedom est entré dans ma maison.
Ci-dessous quelques uns des Designs que j'utilise régulièrement (en espagnol car je vis en Espagne )
J'ai également créé d'autres designs similaires adapté à Tablette / Smartphone. Ceux-ci sont fait pour PC.


Jeedom PC Home2.JPG



Jeedom PC Energy.JPG



Jeedom PC LightsJPG.JPG


En espérant vous avoir inspiré

Ciao!

Kev

Hello, tu peux partager ton widget de puissance stp?

Salut,

Il est dans le Market sous le nom power_gauge2_winhex


Enviado desde mi iPhone utilizando Tapatalk

[Djal94]

Ok nice je l'avais pas trouvé merci

[Djal94]

Fonctionne pas chez moi, j'ai pas les couleurs ...

[yoMalu]

Alors pour ce widget météo voici ce que j'ai fais (informations récupérées du plugin Weather)
Je ne le mets pas dans le market car son alimentation est particulière.

1. Création du virtuel :
   Capture.JPG
   Il faut créer une commande info (type "autre") que nous alimenterons avec toutes les commandes nécessaire au widget. Il est impératif que les commandes soient toute sur la même ligne (sans saut de ligne).
   Pour plus de clarté voici les commandes à intégrer :

   Code : Tout sélectionner

   #[Courbeovie][(Météo) Courbevoie][Condition]#
   #[Courbeovie][(Météo) Courbevoie][Température]#
   #[Courbeovie][(Météo) Courbevoie][Numéro condition]#
   #[Courbeovie][(Météo) Courbevoie][Numéro condition +1]#
   #[Courbeovie][(Météo) Courbevoie][Numéro condition +2]#
   #[Courbeovie][(Météo) Courbevoie][Numéro condition +3]#
   #[Courbeovie][(Météo) Courbevoie][Température Min]#
   #[Courbeovie][(Météo) Courbevoie][Température Min +1]#
   #[Courbeovie][(Météo) Courbevoie][Température Min +2]#
   #[Courbeovie][(Météo) Courbevoie][Température Min +3]#
   #[Courbeovie][(Météo) Courbevoie][Température Max]#
   #[Courbeovie][(Météo) Courbevoie][Température Max +1]#
   #[Courbeovie][(Météo) Courbevoie][Température Max +2]#
   #[Courbeovie][(Météo) Courbevoie][Température Max +3]#
   Courbevoie,Fr

2. Création du widget :
   Capture1.JPG
   Il faut créer un nouveau widget avec les paramètres ci-dessous.
   
   • Création du fichier css :
     Il faut créer un fichier css avec le code ci-après que vous importerez dans votre widget (bouton Fichier).
     Mon fichier s'appel meteo.css. Si vous mettez un autre nom, pensez à corriger le code du widget plus bas.

     Code : Tout sélectionner

     @import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css');
     
     *,
     *::before,
     *::after {
       box-sizing: border-box;
     }
     
     .ww-wrapper {
       width: 220px;
       height: 100%;
       margin: 0 auto;
     
       background-color: rgba(0,0,0,0.25);
     }
     
     .ww-row {
       display: flex;
       justify-content: space-around;
     }
     
     .weatherCard {
       flex: 0 1 220px;
     
       height: 290px;
     
       box-shadow: 0px 2px 11px 1px rgba(0,0,0,0.15);
       line-height: 1.5;
     }
     
     .cityContainer {
       width: 100%;
       height: 150px;
       padding: 12px 15px;
     }
     
     .cityName {
       position: relative;
     
       font-size: 18px;
       text-align: right;
     }
     
     .iconTempWrapper {
         display: block;
     
         margin-bottom: 4px;
     
         text-align: right;
         justify-content: space-between;
     }
     
     .weatherIcon {
         position: absolute;
     
         top: 30px;
         padding: 0;
     
         font-size: 60px;
     }
     
     .weatherTemp {
         position: relative;
     
         opacity: 1;
     
         font-weight: normal;
         font-size: 45px;
     
         transition: 0.2s ease-out;
     }
     
     .weatherTempMinMax{
         margin-top:-10px !important;
         margin-bottom: 5px !important;
     
         font-size:15px;
         font-weight: normal;
     }
     
     .tempAndCity {
       text-align: right;
     }
     
     .tempAndCity p {
       padding: 0;
       margin: 0;
     }
     
     .weatherDesc {
       padding-top: 3px;
     
       font-size: 14px;
       text-transform: capitalize;
       text-align: right;
     }
     
     .weatherForecast {
       height: 140px;
       width: 100%;
     
       background-color: rgba(255,255,255,1);
     
       text-align: center;
     }
     
     .weatherForecast .forecastCard {
         position: relative;
         display: inline-block;
     
         width: 52px;
         margin: 2px;
         padding: 5px 8px;
     
         color: #444;
     }
     
     .forecastCard p {
         margin: 0;
         padding: 0;
     
         font-size: 18px;
         line-height: 1.5;
     }
     .forecastCard .forecastIcons {
       font-size: 25px;
     }
     
     .forecastCard .forecastMin {
         color: #b3b3b3;
     }
     
     .sunny-class {
       background: rgba(255,232,161,1);
       background: radial-gradient(ellipse at center, rgba(255,232,161,1) 0%, rgba(245,202,101,1) 100%);
       color: #997300;
     }
     
     .night-class {
       background: rgba(250,250,250,1);
       background: radial-gradient(ellipse at center, rgba(150,150,150,1) 0%, rgba(100,100,100,1) 100%);
       color: #dddddd;
     }
     
     .cloudy-class {
       background: rgba(250,250,250,1);
       background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(185, 192, 193, 1) 100%);
       color: #6d7f87;
     }
     
     .rainy-class {
       background: rgba(213,240,250,1);
       background: radial-gradient(ellipse at center, rgba(213,240,250,1) 0%, rgba(150,209,230,1) 100%);
       color: #006b99;
     }
     
     .stormy-class {
       background: #ABB6BB;
       background: radial-gradient(ellipse at center, rgb(199, 222, 230) 0%, rgb(155, 170, 175) 100%);
       color: #37474F;
     }
     
     .snow-class {
       background: rgba(153, 181, 191, 1);
       background: radial-gradient(ellipse at center, rgb(199, 212, 230) 0%, rgb(139, 164, 173) 100%);
       color: #395c6b;
     }
     

   • Code du widget :
     Le code se compose de l'appel au fichier css, le bloc html et du bloc JS qui se charge de récupérer les info du virtuel et les mettre en forme.

     Code : Tout sélectionner

     <!-- basé sur le travail de Josh Reynolds
     https://codepen.io/jreynolds90/pen/VmmdyR -->
     
     <link rel="stylesheet" type="text/css" href="plugins/widget/core/template/dashboard/cmd.info.string.(Design) Meteo Weather/meteo.css">
     
     <div style="" class="cmd cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
       <div class="ww-wrapper">
         <div class="ww-row">
     
           <div class="weatherCard">
             <div class="cityContainer cityCard">
               <div class="weatherDesc"></div>
               <div class="iconTempWrapper">
                 <div class="weatherIcon"></div>
                 <div class="tempAndCity">
                   <p class="weatherTemp"></p>
                   <p class="weatherTempMinMax"></p>
                   <p class="cityName"></p>
                 </div>
               </div>
             </div>
     
             <div class="weatherForecast">
               <div class="forecastCard forecastJ1">
                 <p class="forcastDay"></p>
                 <p class="forecastIcons"></p>
                 <p class="forecastMax"></p>
                 <p class="forecastMin"></p>
               </div>
               <div class="forecastCard forecastJ2">
                 <p class="forcastDay"></p>
                 <p class="forecastIcons"></p>
                 <p class="forecastMax"></p>
                 <p class="forecastMin"></p>
               </div>
               <div class="forecastCard forecastJ3">
                 <p class="forcastDay"></p>
                 <p class="forecastIcons"></p>
                 <p class="forecastMax"></p>
                 <p class="forecastMin"></p>
               </div>
             </div>
           </div>
         </div>
       </div>
     
       <script>
     
         function getWeatherIcon_20180323(conditionCode) {
     
           let category = Number(String(conditionCode).charAt(0));
           const conditionDescriptions = {2: ['wi-storm-showers', '#5C6D75'],
                                          3: ['wi-rain-mix', '#51d2fc'],
                                          5: ['wi-rain', '#2cc4f5'],
                                          6: ['wi-snow', '#B2EBF2'],
                                          7: ['wi-fog', '#90A4AE'],
                                          800: ['wi-day-sunny', '#ffc000'],
                                          8: ['wi-day-cloudy', '#a3bcc7'],
                                          9: ['wi-cloudy-gusts', '#A2B4BA']};
     
           //add inline styles for icon elements to ensure the correct icon colour is placed through loops
           if (conditionCode === 520 || conditionCode === 521 ||conditionCode === 522 ){
             let iconHTML = `<i class="wi wi-showers" style="color: '${conditionDescriptions[category][1]}"></i>`;
             return iconHTML;
           } else if (conditionCode === 800) {
             let iconString = conditionDescriptions[800][0];
             let iconHTML = `<i class="wi ${iconString}" style="color: ${conditionDescriptions[800][1]}"></i>`;
             return iconHTML;
           } else {
             let iconString = conditionDescriptions[category][0];
             let iconHTML = `<i class="wi ${iconString}" style="color: ${conditionDescriptions[category][1]}"></i>`;
             return iconHTML;
           }
         }
     
         // Set Background colours with classes varying on the condition.
         function changeCardBg_20180323(conditionCode) {
     
           let category = Number(String(conditionCode).charAt(0));
     
           if (conditionCode === 800) {
             $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('sunny-class');
           } else if (category === 2) {
             $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('stormy-class');
           } else if (category === 3 || category === 5) {
             $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('rainy-class');
           } else if (category === 6) {
             $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('snow-class');
           } else if (category === 7 || category === 8 || category === 9) {
             $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('cloudy-class');
           }
         }
     
         function returnNextDays_20180323(n) {
     
           const dayNames = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
           const today = (new Date()).getDay();
           let nextDays = [];
     
           for (let i = 0; i < n; i++) {
             nextDays.push(dayNames[(today + 1 + i) % dayNames.length]);
           }
     
           return nextDays;
         }
     
       	jeedom.cmd.update['#id#'] = function(_options){
           var state = _options.display_value;
           var stateListe = state.split(",");
           var cityName = stateListe[14];
     	  var country = stateListe[15];
           var conditionJ0 = stateListe[0].replace("\"","");
           var tempJ0 = parseFloat(stateListe[1]);
           var numCondition = [parseFloat(stateListe[2]), parseFloat(stateListe[3]), parseFloat(stateListe[4]), parseFloat(stateListe[5])];
           var tempMini = [parseFloat(stateListe[6]), parseFloat(stateListe[7]), parseFloat(stateListe[8]), parseFloat(stateListe[9])];
           var tempMaxi =[parseFloat(stateListe[10]), parseFloat(stateListe[11]), parseFloat(stateListe[12]), parseFloat(stateListe[13])];
     
           // Build HTML elements and insert data
           $('.cmd[data-cmd_uid=#uid#] .weatherDesc').empty().append(conditionJ0);
           $('.cmd[data-cmd_uid=#uid#] .weatherIcon').empty().append(getWeatherIcon_20180323(numCondition[0]));
           $('.cmd[data-cmd_uid=#uid#] .weatherTemp').empty().append(tempJ0.toFixed(0) + '°C');
           $('.cmd[data-cmd_uid=#uid#] .weatherTempMinMax').empty().append(tempMini[0].toFixed(0) + '° / ' + tempMaxi[0].toFixed(0) + '°');
           $('.cmd[data-cmd_uid=#uid#] .cityName').empty().append(cityName + ', ' + country);
     
           // Call method to change the WeatherCard background by passing it's condition code
           changeCardBg_20180323(numCondition[0]);
     
           // Grab the next 3 days and loop through each with the days top temperature.
           // generate forecast sections and loop through the data for each day
           let nextDays = returnNextDays_20180323(3);
           $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forcastDay').empty().append(nextDays[0]);
           $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[1]));
           $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastMax').empty().append(tempMaxi[1].toFixed(0) + '°');
           $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastMin').empty().append(tempMini[1].toFixed(0) + '°');
     
           $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forcastDay').empty().append(nextDays[1]);
           $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[2]));
           $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastMax').empty().append(tempMaxi[2].toFixed(0) + '°');
           $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastMin').empty().append(tempMini[2].toFixed(0) + '°');
     
           $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forcastDay').empty().append(nextDays[2]);
           $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[3]));
           $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastMax').empty().append(tempMaxi[3].toFixed(0) + '°');
           $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastMin').empty().append(tempMini[3].toFixed(0) + '°');
         }
     
         jeedom.cmd.update['#id#']({display_value:'#state#'});
     
       </script>
     </div>
     

J'espère que ce sera suffisamment clair pour vous permettre d’appréhender ce widget afin de le mettre en place facilement.
Il doit être transposable aux autres plugins météo moyennement une adaptation du code (il me semble que le plugin Darksky ne retourne pas de n° de condition mais du texte).

J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/

[Sartog]

J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/

Bonsoir yoMalu,

Dans le design, pour ajouter ton virtuel il te faut faire clique droit -> ajouter un équipement.

[yoMalu]

J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/

Bonsoir yoMalu,

Dans le design, pour ajouter ton virtuel il te faut faire clique droit -> ajouter un équipement.

Ah donc dans le design, c'est bien le virtuel qu'on importe, faut pas chercher le plugin !
Malheureusement, ça me pop ça
http://prntscr.com/k4xfdr

Voila le virtuel https://prnt.sc/k4xhjl
et le widget https://prnt.sc/k4xhwl

[raphael_malin]

Hello,
J'ai besoin d'aide concernant du codage CSS.
J'ai récupéré du code pour effectuer des cases pour le design mais lorsque je change la couleur toutes les cases changent.
Au début le code était directement dans le texte/html, j'ai donc créé un fichier CSS et maintenant via un lien, je récupère le fichier.
J'ai donc créé un second fichier CSS avec des couleurs différentes, mais lorsque je l'ai ajouté dans le design, toutes les cases ont à nouveau changé

Comment faire pour les dissocier?
et comment puis je sortir certaines lignes de façon à les mettre dans le code html pour ne modifier qu'elles ? (comme le texte par ex qui est déjà comme ca)

Merci
Voici le css:

Code : Tout sélectionner

<style>
.boxT {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background: #EEE;
  background-color: rgba(0,0,50,0.6);
}
.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%); /*Couleur ruban*/
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
</style>

et le html:

Code : Tout sélectionner

<link href="PERSO/fenetre+ruban perso/fenetre+ruban.css" rel="stylesheet" type="text/css">

<div class="boxT">
   <div class="ribbon"><span>SAINTS</span></div>
</div>

[Djal94]

Ça se produit en fonction du navigateur quand tu appelles des propriétés ayant le même nom dans 2 fichiers .css distincts.
Changes le nom des propriétés dans le 2ème fichier et ça devrait aller

[raphael_malin]

qu'appelles tu propriétés? merci

[Djal94]

Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)

[Djal94]

Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)

Ceci est du il me semble au fonctionnement du cache du navigateur (la mise en forme .css est stocké en cache).

[amistad132]

Salut les amis,

Voici mon nouveau design, afficher sur écran 22 pouces en mode vertical.
J'ai encore quelques bricoles à ajouter/ajuster

[Jeeviens]

Nouveau design pour ma tablette et moi, à la demande de la chef des waf : )

La chef veut des boutons On/Off... alors bon...

Premier jet, écran principal : ) (Je peaufine les autres...)

Image à 80% comme d'hab : )

SShot_1.png (543.02 Kio) Consulté 2437 fois

A Partir de la, c'est juste en cours...

SShot_2.png (398.2 Kio) Consulté 2434 fois

SShot_3.png (468.26 Kio) Consulté 2434 fois

[pinouche]

Hello
Bravo à tous pour vos désign

Juste une question : comment faites vous pour avoir des onglets comme sur la page.

J'ai cherché sur le net. Il faut mettre du code Css mais où faut-il le placer ?

Merci de votre aide.

bonjour,
désolé pour la réponse tardive. En fait j'ai simplement créer des bloc textes/html que j'ai placé sur le design et j'ai placé les mêmes bloc sur les autres pages. j'ai vraiment fait au plus simple et sans code.

[amistad132]

Nouveau design pour ma tablette et moi, à la demande de la chef des waf : )

La chef veut des boutons On/Off... alors bon...

Premier jet, écran principal : ) (Je peaufine les autres...)

Image à 80% comme d'hab : )

Ou as tu eu les "voyants" retours d’états rouge et vert ? j'arrive pas a mettre la main sur ce style de widgets

[Jeeviens]

@amistad132 : salut ! Ce sont tous des créations perso

[amistad132]

@amistad132 : salut ! Ce sont tous des créations perso

Eh bien bravo !! Ca a de la gueule, tu as fais avec quel logiciel ?

[Jeeviens]

Google Images et un vieux Photoshop 7

[raphael_malin]

Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)

Super merci pour ton explication,
J'ai galéré sur le début, car il semble qu'il faut mettre un petit quelques chose au début pour que le 1er boxT fonctionne.
Du coup j'ai mis rien. sinon le boxT0 n'est pas pris en compte.

Code : Tout sélectionner

<style>
.rien {}
.boxT_0 { /*bleu foncé*/
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,0,50,0.6);
}
.boxT_1 {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,0,150,0.6);
}
.boxT_2 {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,100,250,0.6);
}
.ribbon_0 {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_0 span { /*bleu*/
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_0 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon_0 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon_1 { /*Violet*/
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_1 span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#ED01FE 0%, #B501C1 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_1 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #B501C1;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #B501C1;
}
.ribbon_1 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #B501C1;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #B501C1;
}
.ribbon_2 {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_2 span { /*Rouge*/
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#B9121B 0%, #C1010D 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_2 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #C1010D;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C1010D;
}
.ribbon_2 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #C1010D;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C1010D;
}
</style>

[Djal94]

Je n'ai pas eu besoin de faire ca , mais pourquoi pas. Et du coup ca fonctionne?