Можно ли маскировать или обрезать форму изображения с помощью CSS?

Я пытаюсь создать этот дизайн в CSS. Возможно ли это?

Это мой код:

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

Ответы

Ответ 1

С одним классом.

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>

Ответ 2

Это может быть достигнуто с помощью только CSS. Псевдоэлементы :before и :after используются для создания треугольников (расположенных относительно контейнера), а border-radius создает закругленные углы.

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

Ответ 3

В то время как Hidden Hobbes уже дал хороший ответ, есть другой способ: вращать div и изображение. Однако для этого требуется более крупное изображение, которое будет обрезано. Основной код

    .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

Ответ 4

Вот версия на основе ответа @HiddenHobbes и комментарий @misterManSam, где контейнер полностью прозрачен.

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>

Ответ 5

Как отметил Остин Бранкхорст в комментариях, возможно использование отсечения SVG. Я собрал быстрый Fiddle, показывающий, как это можно сделать, и я добавлю HTML ниже:

<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="#" onclick="location.href='http://placehold.it/120x100'; return false;" x="0" y="0" height="100px" width="120px"  clip-path="url(#mask)" />
</svg>

Стоит отметить, что я не эксперт, и я готов поспорить, что атрибут transform может быть удален из элемента path, если вы можете решить, как правильно настроить значение d.