Annulé l'effet de rotation d'une div

Résolu

Utilisateur anonyme -
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
Effet miroir word - Guide
Div c++ - Télécharger - Langages
Rotation photo android ✓ - Forum Téléphones & tablettes Android

1 réponse

Réponse 1 / 1

tartampion

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

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é

L’écran de ma tablette Samsung ne pivote plus je veux la re

Rotation de l'écran

comment faire pour mettre une image en miroir (facile)

Votre réponse

Discussions similaires