Comment obtenir des coins de bordure CSS chanfreinés plutôt que des coins arrondis?
Avec le CSS border-radius
bien je peux avoir un sinueuse, aux bords arrondis coin à la fin.
.boxLeft{
border-right: 1px dashed #333;
border-bottom: 1px dashed #333;
border-radius: 0 0 10px 0;
}
.boxRight{
border-left: 1px dashed #333;
border-bottom: 1px dashed #333;
border-radius: 0 0 0 10px;
}
Mais je veux une frontière coin, comme l'image ci-dessous. Si j'ai deux boîtes (Jaune & Rose) rencontre les uns des autres et je veux une dure coin à bas point de rencontre (en pointillé coin), que dois-je faire?
Est-ce possible à l'aide de CSS?
source d'informationauteur Mayeenul Islam
Vous devez vous connecter pour publier un commentaire.
Ici un moyen, même si elle a quelques défauts, comme pas de frontières et il n'est pas transparent:
HTML:
CSS:
RÉSULTAT:
Voici un violon.
Dégradés CSS3 peut faire l'affaire:
Essayer cela, Voici un Violon:
http://jsfiddle.net/S2nqK/3/
HTML:
CSS:
J'en ai eu un
et css
c'est ce que vous avez besoin, de transparence et de tout
Cela est également possible à l'aide de "clip-path".
Exemple ici... http://codepen.io/anon/pen/vGWoPv
Soutien pour clip-path peut être trouvé ici... http://caniuse.com/#search=clip-path
Une bonne
Le meilleurmoyen pour archiver ce: la frontière images. En combinaison avec.svg
une bonne solution...Ok, j'ai donc fait un Bibliothèque JS pour automatiser la création de bordures chanfreinées.
Il dispose de deux méthodes pour créer des chanfreins:
Méthode 1: il crée un chanfreinés d'arrière-plan à l'aide de Toile de l'API et l'a mis dans le CSS
background-image
de l'élément.Méthode 2: il ajoute 4 du CSS triangle des éléments du DOM autour de la cible, rendant le chanfrein.
Vous coller avec la méthode 1 lorsque vous pouvez laisser la bibliothèque de définir la
background-image
et vous aurez besoin de la méthode 2 lorsque votre cible a déjà de l'expérience, comme dans <img>'.L'utilisation est simple, il suffit d'appeler
ChamferBg
pour l'utilisation de la méthode 1, ouChamferEnvelop
pour utiliser la méthode 2:Les options et leurs valeurs par défaut sont:
Vous aurez besoin de mettre
resize_observe
à vrai si vous utilisez méthode 1 et votre élément peut changer sa taille au moment de l'exécution, parce qu'alors il aura besoin de recréer l'anglés à fond à chaque fois qu'il redimensionne.