Comment faire un fond de triangle CSS sur un div sans utiliser de bordure et d'image?

Je sais comment créer des triangles en CSS avec des frontières et à l'aide d'images, mais dans mon cas, j'aimerais utiliser la couleur d'arrière-plan.

Je veux quelque chose comme cette image.

Comment faire un fond de triangle CSS sur un div sans utiliser de bordure et d'image?

Quelqu'un peut m'aider?

source d'informationauteur user3584839

  1. 14

    Le problème avec la création de triangles à l'aide de CSS frontières est leur manque de souplesse quand il s'agit de style. En tant que tel, vous pouvez utiliser un relativement entièrement pseudo véritable élément au lieu de cela, fournir beaucoup plus d'options de style:

    Sûr, vous pouvez le faire, par exemple:

    Démo De Violon

    div{
    height:50px;
    width:50px;
    position:relative;
    overflow:hidden;
}
div:after{
    height:100%;
    width:100%;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    content:'';
    display:block;
    position:absolute;
    left:-75%;
    background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
    background-size:cover;
}
  2. 14

    Une alternative est d'utiliser un arrière-plan un dégradé linéaire.
    Le truc est de mettre la direction en bas à droite, définissez la première gamme de blanc (ou transparent) et la deuxième gamme de la couleur que vous souhaitez triangle.

    Dans l'exemple suivant, la première moitié de l'arrière-plan est blanc (de 0% à 50%) et de la seconde moitié (de 50% à 100%) gris clair.

    background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #999 50%, #999 100%);

    Veuillez noter que cette propriété est uniquement pris en charge par les navigateurs (IE 11+, FF 49+)

  3. 2

    Essayer cet outil pour générer la forme que vous voulez: https://bennettfeely.com/clippy/. Ensuite modifier le code en fonction de vos besoins. Par exemple, c'est comment vous pouvez obtenir un triangle:

    -webkit-clip-path: polygone(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygone(50% 0%, 0% 100%, 100% 100%);