Ist es möglich, die Form eines Bildes mit CSS zu maskieren oder zu fixieren?

Question

Ich versuche, dieses Design in CSS zu erstellen. Ist es möglich?

Dies ist mein 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>

Das Dreieck gebildet wird, aber nicht in der gleichen Weise wie das Bild.

jsFiddle

Answer 1

Mit einer einzigen Klasse.

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> 

Answer 2

Dies kann nur mit Hilfe von CSS erreicht werden. Pseudo-Elemente :before und :after werden verwendet, um die Dreiecke (relativ zum Container positioniert), während border-radius erstellt die abgerundeten Ecken.

.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/

Answer 3

Während Hidden Hobbes war bereits eine gute Antwort, es durch Drehen des div eine andere Art und Weise ist und das Bild auf. Dies erfordert jedoch ein ziemlich großes Bild, das abgeschnitten wird. Basic-Code ist

.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; 
    } 

DEMO

Answer 4

Hier eine Version auf @HiddenHobbes Antwort und @ misterManSam Kommentar, wo der Behälter vollständig transparent basiert.

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>

Answer 5

Als Austin Brunkhorst in den Kommentaren darauf hingewiesen, ist es möglich SVG clipping verwenden. Ich habe zusammen eine schnelle Fiddle zeigt setzen, wie es gemacht werden kann, und ich werde den folgenden HTML-Code hinzu:

<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> 

Es ist erwähnenswert, dass ich kein Experte bin, und ich wette, dass transform Attribut sein kann aus dem path Element entfernt, wenn Sie herausfinden können, wie Sie den d Wert richtig optimieren.