Comment créer deux triangles à côté d'une image?
Comme vous pouvez le voir dans le JSFIDDLE, les triangles ne sont pas en train de fumer l'image. Je veux qu'ils touchent l'image et la barre bleue ci-dessus. J'ai essayé ce message: Comment puis-je Avoir une image float à côté d'une Div centrée? n'a pas fonctionné. p>
p>
<div class="content"> <ul class="producten"> <li> <div class="producten_top"><h1>Test</h1></div> <div class="arrow_left"></div> <img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen"> <div class="arrow_right"></div> </li> </ul> </div>
3 Réponses :
Utiliser p> Position: absolu code> au lieu de Affichage: inline-block code> et donnez 8px code> frontière pour triangles au lieu de 5px code > et définir affichage: bloquer code> et margin: auto code> pour faire img code> centre. Bien sûr, vous devez définir la position : relatif; code> pour parent (ul.producten LI) code>.
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<div class="arrow_right"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
</li>
</ul>
</div>
Et quelle magie tu as fait pour avoir la solution ?? S'il vous plaît ajouter une explication à votre réponse afin que OP puisse obtenir l'idée si la prochaine fois qu'il essaiera de faire plutôt de copier et de coller .. Merci.
MMM..small Ligne blanche Bidise vos triangles dans mon navigateur (Firefox)
@James Oui, je vois maintenant .. mais je pense que c'est un problème FF pour rendre la forme triangulaire CSS avec des frontières.
@Leothelion mis à jour. Merci pour la pointe, mais pensé quand op voir le code découvrira ce qui s'est passé.
@James, que la question de la frontière triangle est courante dans FF avec transformer .. Essayer de résoudre du matin ..
@Leothelion Veuillez lire ce commentaire sous la question. Essayez avec vous-même avec l'affichage : inline-block si vous obtenez un bon résultat, donc donner une réponse. :)
J'ai modifié votre CSS. Les changements que j'ai faits sont:
Vérifiez-le ... P>
<html>
<head>
<style>
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
}
ul.producten li img {
display: inline-block;
width: 315px;
position: fixed;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1c1c1d;
transform: rotate(-225deg);
float: left;
position: fixed;
}
.arrow_right {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1c1c1d;
transform: rotate(-315deg);
float: right;
}
</style>
</head>
<body></body>
</html>
Cette technique fait une division carrée avec un arrière-plan alpha à gradient linéaire qui ressemble à un triangle. En prime, en ajustant la distance entre Alpha = 1 et Alpha = 0 (les pourcentages) dans les gradients, vous pouvez modifier l'anti-aliasing de la ligne diagonale (la flèche gauche a plus d'anti-aliasing dans cet exemple).
p>
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<div class="arrow_right"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
</li>
</ul>
</div>
Affichage: Inline-Block est toucher à ce type de mise en page, car les éléments sont dans le flux de texte, et même les espaces dans votre code HTML peuvent gâcher les choses. L'espace gauche et droit aux triangles est causé par de tels espaces tandis que l'espace au-dessus de celle-ci est causée par l'espacement vertical entre les lignes de texte (comme dans le texte normal). Vous pouvez éliminer cela partiellement, mais généralement on choisiraitposition: absolu pour faire ce genre de positionnement.