Menu

Annulé l'effet de rotation d'une div [Résolu/Fermé]

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- - Dernière réponse : astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- 18 oct. 2017 à 14:22
Bonjour,

j'ai une div qui a subie une rotation de 27deg je voudrais lui appliqué un background mais que ce dernier soit droit (sans rotation) et qu'il ne deborde pas de ma div inclinée.

des idées ?


Afficher la suite 

1 réponse

0
Merci
Yo,
avec un clip css et la forme inclinée. Ou simplement découper le bg de la forme inclinée à 27°.
Pour le clip:
https://www.w3schools.com/cssref/pr_pos_clip.asp

Dans tous les cas je pense qu'il faut simplement tricher en superposant le div(ça existe encore les div :o ) transparent avec un container qui gère l'arrière plan (ou en jouant avec 'absolute' et 'z-index' ).

Mais bon sans voir le code difficile de ire quelque chose de précis
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
voila le code de mon test actuel.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="css/home.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
  <div class="wrap">
    <a href="#" rel="nofollow noopener noreferrer" target="_blank">
      <span>bcg2</span>
    </a>
    <a href="#" rel="nofollow noopener noreferrer" target="_blank">
      <span>bcg1</span>
    </a>
  </div>
</body>
</html>


et le css coresspondant

.wrap {
    position: relative;
    width: 99.5vw;
    height: 51.5vw;
    border: 1px solid #999;
    overflow: hidden;
}
.wrap a {
    position: absolute;
    width: 112vw;
    height: 51vw;
}
.wrap a:hover {
  filter: opacity(0.8);
}
.wrap a span {
    background-color: rgba(0, 0, 0, 0.8);
    width: 170px;
    border-style: double;
    border-width: 10px;
    border-color: white;
    position: absolute;
    font-size: 2em;
}


.wrap a:nth-child(1) {
    transform-origin: 0 0;
    transform: rotate(27deg);
    background: #ccc;
}
.wrap a:nth-child(1) span {
    top: 25%;
    left: 25%;
    transform: rotate(-27deg);
    color: #036;
}

.wrap a:nth-child(2) {
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(27deg);
    background: #036;
}
.wrap a:nth-child(2) span {
    top: 55%;
    right: 25%;
    transform: rotate(-27deg);
    color: #fff;
}



je voudrais remplacer les deux couleur par des images.
je ne connais pas du tout le fonction clip, je me renseigne de mon coté.
si tu trouve le temps de me faire un petit exemple je t'en serais reconnaissant .
merci