IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Div en biais


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    676
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2006
    Messages : 676
    Points : 121
    Points
    121
    Par défaut Div en biais
    Bonjour,

    J'aimerais savoir comment fait ce thème pour avoir cet aspect en biais entre le cadre rouge et blanc
    http://livedemo00.template-help.com/wt_52049/index.html

    Apparemment c'est des CSS mais je ne comprends pas comment ils font

  2. #2
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2014
    Messages
    183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2014
    Messages : 183
    Points : 60
    Points
    60
    Par défaut
    peut être comme ça :p
    Nom : Sans titre.png
Affichages : 1680
Taille : 139,8 Ko

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    en fait, il faut regarder attentivement le code source de la page...

    On y trouve une triangle blanc :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <svg class="bigTriangleColor" preserveAspectRatio="none" viewBox="0 0 100 102" height="100.1%" width="100.5" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M100 0 L0 102 L100 102 Z">
    </svg>
    avec :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .thumb-box1 .box2 svg.bigTriangleColor {
        left: -115px;
        pointer-events: none;
        position: absolute;
        top: 0;
    }
    + La balise <svg> permet d'intégrer directement dans une page web des dessins scalaires.
    Fais une recherche pour en savoir plus...

  4. #4
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2014
    Messages
    183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2014
    Messages : 183
    Points : 60
    Points
    60
    Par défaut
    c'était pas plus simple de faire une section (ou autre chose du même genre) avec un background (la partie rouge et blanc) et de mettre a l'interrieur 2 paragraphe ?

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    la réalisation est également faisable en utilisant le CSS3, un truc du style
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .fond {
      width:10em;
      height:10em;
      background:red;
      -webkit-transform: rotate(30deg);
         -moz-transform: rotate(30deg);
           -o-transform: rotate(30deg);
              transform: rotate(30deg);
    }
    Les transformations en CSS3

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Centrer une <div> en position fixe sous IE
    Par Jorus dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/09/2004, 16h29
  2. [C#] Placer fichier html entre balises DIV
    Par Febus dans le forum ASP.NET
    Réponses: 9
    Dernier message: 07/05/2004, 12h44
  3. xml->html : retour chariot, espaces dans un div
    Par d'Oursse dans le forum XML/XSL et SOAP
    Réponses: 9
    Dernier message: 27/04/2004, 20h13
  4. Editeur XMLGram et techniques <div>erses...
    Par Sylvain James dans le forum XMLRAD
    Réponses: 3
    Dernier message: 02/10/2003, 17h41
  5. XSLT et balise HTML div
    Par haypo dans le forum XSL/XSLT/XPATH
    Réponses: 6
    Dernier message: 01/07/2003, 21h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo