Je construis actuellement un site Web qui nécessite des boutons pour avoir une inclinaison Quelqu'un pourrait-il me montrer une solution à cela? Ignorer l'icône sur le bouton, je suis capable de le faire. J'ai juste besoin du côté incliné. P> p> 
p>
<div>Some Text</div>
3 Réponses :
Ceci est également possible à l'aide de CSS Border-rayon 'en définissant plusieurs valeurs.
Ceci a un peu plus de courbure que votre exemple d'image, mais il est beaucoup plus propre et ne nécessite pas d'éléments supplémentaires ni de pseudo-éléments. p>
p>
<div>Some Text</div>
Note: strong> J'ajoute une réponse séparée parce que les réponses que j'ai liées dans des commentaires semblent donner une solution, celle-ci est un peu plus complexe en raison de la présence de la frontière. Rayon frontalier. P> La forme peut être créée en utilisant les parties suivantes: p>
- Un élément de conteneur principal qui est positionné relativement. li>
- deux pseudo-éléments qui sont environ la moitié de la largeur de l'élément parent. Un élément est asymétrique pour produire le côté gauche raforé, tandis que l'autre n'est pas biaisé. Li>
- Le pseudo-élément asymétrique est positionné à gauche tandis que l'élément normal est positionné à droite de l'élément de conteneur. LI>
- Le pseudo-élément asymétrique n'a que des bordures supérieure, gauche et inférieure. La bordure droite est omise car elle viendrait au milieu de la forme. Pour le pseudo-élément qui n'est pas asymétrique, la bordure gauche est évitée pour la même raison. Li>
- la bordure gauche du pseudo-élément asymétrique est un peu plus plus épaisse que les autres frontières, car Skew rend la frontière plus mince que ce n'est en réalité. Li> ul>
J'ai également ajouté un effet
sur l'effet code> sur l'extrait pour démontrer la nature réactive de la forme. P>p>
<div class='outer'> Call me back </div>
Cela a très bien fonctionné! Merci @harry! J'ai fini par utiliser des chemins SVG car nous avons tous les éléments visuels, mais je vais utiliser cette méthode pour certains boutons de variable. :)
@Benh: Les chemins SVG sont notes, à l'exception de deux choses (1) courbes à chaque coin doivent être codées à travers des commandes au lieu de simplement définir une propriété dans CSS et (2) les coups de frontière dans SVG ont tendance à devenir épaisses (c'est-à-dire , l'accident vasculaire cérébral a également échoué). Lorsque une seule hauteur / largeur change, il ferait des frontières sur deux faces plus épaisses que les deux autres. L'attribut SVG qui évite cela ne fonctionne pas dans IE. Je recommanderais SVG pour les formes antérieurement, mais faites juste attention à ces deux :)
J'ai remarqué que dans IE, les boutons ont causé quelques problèmes à l'aide de SVG afin que je vais essayer votre méthode pour tous. C'est une honte car les icônes ont l'air tellement plus nette lorsque vous utilisez les boutons SVG!
Vous pourriez avoir un coup d'œil à ma réponse ici - Stackoverflow.com/questions/28248723/... . La flèche est créée avec deux parties dont chacune a une inclinaison sur un côté et des coins arrondis. Ceci ( Stackoverflow.com/questions/ 30441122 / ... ) est un autre fil qui couvre la création d'une forme avec un côté incliné, mais il ne couvre pas les coins arrondis.
Dupliqué possible de forme avec un côté incliné (sensible)
Malheureusement, de ma compréhension, aucune de ces solutions ne fonctionnera car vous ne pouvez pas ajouter de frontière et de rayon de frontière aux pseudo-éléments?
@Benh: le premier fil que j'ai lié utilise
Border-rayon sur pseudo-éléments et vous pouvez très certainement ajouter une frontière à des éléments pseudo.@Harry je vais prendre un autre coup d'oeil! merci harry