Annulé l'effet de rotation d'une div

Résolu/Fermé

Utilisateur anonyme - 18 oct. 2017 à 12:29
Utilisateur anonyme - 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 ?

A voir également:

Annulé l'effet de rotation d'une div
Rotation ecran windows - Guide
Rotation video - Guide
Div c++ - Télécharger - Langages
Effet miroir word - Guide
Restreindre instagram effet - Guide

1 réponse

Réponse 1 / 1

tartampion
18 oct. 2017 à 13:35

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

Utilisateur anonyme
18 oct. 2017 à 14:22

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

Discussions similaires

Savoir si appel annulé a sonné

Appel annulé

problème annule l'appel

erreur (#DIV/0) formule MOYENNE.SI.ENS

Discussions similaires

Newsletters