CSS pour slant ligne diagonale

Certains CSS à l'aide d'un expert me guider pour atteindre l'inclinaison de la ligne dans une zone de via css. Je ne peux pas attaché à l'image. Je sais que cela peut être fait, mais le manque de connaissances des experts sur css je suis absent de la façon d'atteindre cet objectif. Je me réfère à cet exemple. Si vous allez à la fin de la page (slanthowto.html) il y a une image qui ne montrent que les obliques ligne noire... je veux mettre en place le même.

Ce qui concerne,

Le lien s'affiche bien pour moi. @pritisolanki La technique qu'ils utilisent est assez hackish - je ne recommande pas de l'utiliser. La meilleure façon d'atteindre le même effet serait d'utiliser une image d'arrière-plan.

OriginalL'auteur user269867 | 2010-08-30

  1. 5

    C'est le code CSS et HTML pour les obliques ligne noire:

    <div style="position: relative; width: 100px; height: 100px;">
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div>
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div>
</div>

    Le CSS:

    .borderdraw {
    border-style:solid;
    height:0;
    line-height:0;
    width:0;
}

    MODIFIER: Vous pouvez également copier les propriétés de la classe de l'attribut style:

    <div style="position: relative; width: 100px; height: 100px;">
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
</div>
    Cela a fonctionné exactement ! Génial
    pourriez-vous nous donner un exemple?

    OriginalL'auteur 2ndkauboy

  2. 2

    Mise à jour pour 5 ans plus tard (2015)...

    Transformations 2D profiter d'un soutien beaucoup mieux maintenant. Ils vont aussi faire le travail de l'élimination de la "crise" ou " barbes-vous peut-être vu dans la méthode précédente. CSS ci-dessous.

    .slanted-line {
  width: 300px;
  background: black;
  height: 2px;

  /* bonus rounded edges */
  border-radius: 1px;

  transform: rotate(-45deg);
  -os-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

  /* helps with positioning */
  transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
}

    Prise en charge du navigateur selon caniuse.com:

    • IE 9+
    • Firefox 31+
    • Chrome 31+
    • Safari 7+
    • De l'opéra 27+
    • iOS Safari 7.1+
    • Navigateur Android 4.1+
    • Mobile Chrome 41+

    DÉMO

    OriginalL'auteur charltoons

  3. -4

    N'utilisez pas cette méthode. Non, sérieusement, ne le font pas. Regarder la date au bas de la page. Il dit

    Dernière modification le: Jeu Jan 30 21:56:16 Romance Standard Time 2003

    Que y a sept ans. La technologie est déplacé sur. Nous ne le faisons pas plus. Juste aller de l'utiliser toute manipulation de graphiques de logiciels, dessinez vous-même un triangle, et l'utilisation de ces deux techniques de coller une image dans votre page web.

    Tout d'abord, l'image. Voici un que j'ai créé dans la Peinture antérieure:

    CSS pour slant ligne diagonale

    Puis, avec le img tag

    <img src="triangle.png" alt="Triangle!" />

    ou l'arrière-plan, avec la méthode CSS

    <div class="triangle"></div>


.triangle {
    background: url('triangle.png') no-repeat;
    width: 120px;
    height: 120px;
}

    C'est mieux, n'est-ce pas.

    Grâce Yi. Pouvez-vous svp m'aider à comprendre les notions de base .. Désolé pour l'été afin de noob. J'ai 140 apparition d'une telle instance (boîte avec inclinaison de la ligne) sur ma page, j'ai donc pensé qu'il est bon d'avoir du CSS de la classe plutôt qu'une image. S'il vous plaît aidez-moi à comprendre que ce qui est bon d'avoir CSS ou les images dans de tels scénarios.
    N'avez pas d'excuses - c'est ce qu'est ce site. Les boîtes de commentaires ne sont pas vraiment le meilleur endroit pour demander (ou réponse) questions. Si vous avez quelque chose de compliqué, poser une nouvelle question sur ce site. Pour la différence entre les deux, voir: dev.opera.com/articles/view/17-images-in-html/#imagetypes. La raison pour laquelle il est bon d'utiliser l'une des méthodes ci-dessus, est parce que vous êtes supposé faire elle - frontières frontières, et rien d'autre vraiment.

    OriginalL'auteur Yi Jiang