Ответ 1

Параметры будущего

Идеальный сценарий - использовать один элемент без изображений.

Маскировка и/или отсечение были бы полезны в таких ситуациях, хотя поддержка браузера ограничена. Кажется, что прогресс был достигнут в спецификации (ниже), так как я впервые написал этот ответ, так что поощряю.

• http://www.w3.org/TR/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

Практический подход

На данный момент я бы пошел с решением на основе изображений. Это не должно быть сложным.

Я рекомендую избегать растровой графики, поскольку дисплеи с высокой плотностью становятся все более распространенными (почти каждый монитор планшетных ПК/смартфонов и 4K ПК). Для этого SVG будет работать в большинстве современных браузеров, а PNG можно использовать как резерв.

Demos

• Вот демонстрационный пример с использованием PNG: http://jsfiddle.net/MxspA/6/.
• Та же демонстрация с поддержкой IE7: http://jsfiddle.net/MxspA/9/ (заменяет :before и :after дополнительными элементами).

Источник для версии IE8 +

<div id="box">
    <div id="knockout"></div>
</div>

#box{ 
    position: relative; 
}

#knockout {
    background-image: url(http://i.stack.imgur.com/AXHM0.png);
    width: 105px;
    height: 180px;
    margin: 0 auto;    
}

#knockout:before{
    content: " ";
    position: absolute;
    left: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

#knockout:after{
    content: " ";
    position: absolute;
    right: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

Изображения

Здесь прозрачный PNG, чтобы вы начали. Кто-то с базовыми навыками Adobe Illustrator может воссоздать это как изображение SVG, предоставляя вышеупомянутые возможности высокого разрешения. SVG будет хорошо работать как фоновое изображение.

Ответ 2

Это возможно с помощью маски CSS-alpha: https://caniuse.com/#feat=css-masks

обновление 1

• Создайте DIV -слойный ontop
• Вставьте элемент CANVAS. Нарисуйте черные черные части, остальные должны быть прозрачными.

обновление 2

Я уверен, что нет возможности создать этот макет, не используя PNG-изображения с альфа-слоем в более старом браузере.

Ответ 3

EDIT: расширенная демонстрация с помощью @yentups опубликовала скрипку снова.

Я немного поиграл с лучистыми градиентами и придумал следующее. Вы должны немного поиграть и привыкнуть к синтаксису радиальных градиентов. Мне уже поздно, теперь я не буду обнимать его. Удачи!

Демо: http://jsfiddle.net/5VDLX/

HTML:

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

• Поддержка браузера для градиентов CSS3 http://caniuse.com/#feat=css-gradients
• Поддержка браузера для опций фонового изображения CSS3 http://caniuse.com/#feat=background-img-opts

Ответ 4

Использование kleinfreund кода:
Это DEMO

Пример полной рабочей страницы: здесь