Comment faire ce type de pentagone sans My Code: http://codepen.io/anon/pen/mybkrq p> p> -webkit-pink-path code> car sa situation ne fonctionne pas la plus grande partie du navigateur comme Firefox, IE9.
<div></div>
4 Réponses :
Vous pouvez utiliser directement p> svg code>.
<div id="main-container">
<div id="container">
<div id="shape">
</div>
</div>
</div>
Un ventilateur dur. Il l'utilise presque partout. Mais il a un point qu'il souligne dans chaque réponse - Support de navigateur
Votre dernier extrait fonctionne, mais je ne suis pas en mesure de définir BG @ chipchocolate.py
@ chipchocolate.py div {position: relatif; largeur: 125px; Hauteur: 150px; Contexte: URL (imag2es.jpg); }
Maintenant, cela peut être fait uniquement avec SVG. Pour les navigateurs WebKit, utilisez Clip-Chemin pour d'autres, utilisez SVG
@ chipchocolate.py BG n'est pas défini conformément à Pentagon Codepen.io/anon/pen/myovgv
@ chipchocolate.py Il y a une option pour définir BG via CSS pas un SVG
Problème de navigateur croisée .. Safari et IE9 @ Chipchocolate.py
@ chipchocolate.py j'ai vérifié la plupart du temps, mais le résultat est toujours identique sur IE9 et Safari, donnez-moi une solution alternative afin que je vous ferai marquer sur votre réponse
@Querymaster - C'est ce que je suis venu avec ----> DABBLET.COM/GIST/F27799D2CF5A9B68IADC
Dans la méthode du triangle, pourquoi position: absolue? Le triangle disparaîtrait si je ne l'ai pas ajouté.
Vous pouvez utiliser CourantColor pour pirater l'image arrière-fond. p> p>
<div><div/>
Votre réponse est vraiment utile pour moi, mais je veux une autre chose comment puis-je régler une photo de fond sur votre Pentagone
@ chipchocolate.py il est possible pourquoi dire quelque chose comme ça? HABE Un regard sur cette Stackoverflow.com/cetions / 7433454 / ...
@Tambo - génial! Vous devriez l'ajouter à votre réponse. :)
@Tambo - Quand j'ai dit pas possible avec CSS , je voulais dire "image-image à la frontière" pas un élément div et je ne voulais pas être offensant du tout. Je m'excuse si c'était offensant. :)
@Tambo Il y a une option pour définir BG via CSS
@Tambo - Et si l'arrière-plan est une image? . Pas exactement ce que OP a demandé.
<div id="pentagon"></div>
<style>
#pentagon {
margin-top:45px;
position: relative;
width: 54px;
border-width: 50px 24px 0px 0px;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 54px;
top: -85px;
border-width: 0px 24px 35px 0px;
border-style: solid;
border-color: transparent transparent red;
}
</style>Votre réponse est vraiment utile pour moi, mais je veux une autre chose comment puis-je régler une photo de fond sur votre Pentagone
Il y a une option pour définir BG via CSS
Vous pouvez utiliser cette approche:
Overflow: caché; code> à celui-ci. Li>
- Ajoutez un pseudo-élément et non transformez-le. La positionner correctement dans l'élément principal. LI>
ul>
survolez sur l'image pour voir comment cela fonctionne: P>
Fiddle strong> et snippet fort>: p> p>
<div></div>
CSS-Tricks.com/examples/ShapaSofCSS
@Harry mon problème est la direction que pourquoi j'ai posté ici