Est-il possible de masquer ou de couper la forme d'une image en utilisant CSS?
J'essaie de créer ce design en CSS. Est-il possible?
C'est mon code:
.triangle{
border-radius: 50%;
width: 120px;
height: 120px;
}
.triangle img {
width: 120px;
height: 120px;
}
.triangle::after{
right: 150px;
top: 50%;
border: solid transparent;
content:"";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
border-color: white;
border-left-color: white;/*white is the color of the body*/
border-width: 60px;
margin-top: -60px
}<div class="triangle">
<img src="http://deskode.com/images/placeholder/team/07.jpg">
</div>Le triangle est formé, mais pas de la même manière que l'image.
5 réponses
Avec une seule classe.
Http://jsfiddle.net/koh36dsz/1/
.wedge {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 0px solid red;
border-bottom: 60px solid red;
}
<div class='wedge'></div>
Cela peut être réalisé en utilisant simplement CSS. Les Pseudo-éléments :before et :after sont utilisés pour faire les triangles (positionnés relativement au conteneur), tandis que border-radius crée les coins arrondis.
.triangle {
border-radius: 0 60px 60px 0;
height: 120px;
overflow: hidden;
position: relative;
width: 120px;
}
.triangle:before, .triangle:after {
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
}
.triangle:before {
border-right: 60px solid transparent;
border-top: 60px solid #FFFFFF;
top: 0;
}
.triangle:after {
border-bottom: 60px solid #FFFFFF;
border-right: 60px solid transparent;
bottom: 0;
}<div class="triangle">
<img alt="" src="http://placehold.it/120x120" />
</div>Js Fiddle: http://jsfiddle.net/rw7q2te2/1/
Alors que Hobbes cachés a déjà fourni une bonne réponse, il existe un autre moyen de faire pivoter la div et l'image. Cependant, cela nécessite une image plutôt plus grande qui sera coupée. Code de base est
.triangle{
border-radius: 50%;
width: 120px;
height: 120px;
margin:0 auto;
transform: rotate(-45deg);
position: relative;
overflow:hidden;
border-radius: 0 50% 50% 50%;
}
.triangle img{
width: 200%;
height: 200%;
transform: rotate(45deg);
position: relative;
left: -60px;
top: -30px;
}
Voici une version basée sur la réponse de @ HiddenHobbes et le commentaire de @misterManSam où le conteneur est complètement transparent.
Http://jsfiddle.net/jkz8bkb8/1/
body {
background: #f00;
}
.triangle {
overflow: hidden;
position: relative;
width: 90px;
height: 90px;
margin: 15px;
transform: rotate(45deg);
}
.triangle img {
border-radius: 50%;
position: absolute;
right: 0;
top: 0;
width: 120px;
height: 120px;
transform: rotate(-45deg);
}<div class="triangle">
<img alt="" src="http://placehold.it/120x120" />
</div>Comme Austin Brunkhorst l'a souligné dans les commentaires, il est possible d'utiliser SVG clipping . J'ai mis en place un rapide Fiddle montrant comment cela peut être fait et j'ajouterai le HTML ci-dessous:
<svg width="120px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="mask">
<path d="M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z" fill="red" transform="rotate(-135 133 120)" />
</clipPath>
</defs>
<image xlink:href="http://placehold.it/120x100" x="0" y="0" height="100px" width="120px" clip-path="url(#mask)" />
</svg>
Il vaut la peine de souligner que je ne suis pas un expert et je parie que l'attribut transform peut être supprimé de l'élément path Si vous pouvez déterminer comment modifier correctement la valeur d.