Вырежьте прозрачный круг с помощью CSS3

Я хочу сделать эту форму в CSS3. Является ли это возможным? :С

введите здесь описание изображения

Мой план состоит в том, чтобы поместить изображение на задний план, поэтому я хочу, чтобы эта часть была прозрачной (эта круглая часть).

РЕДАКТИРОВАТЬ: Самая большая проблема заключается в том, что фон не сплошной цвет, это изображение, а фон тела div должен быть полупрозрачным.


css css-shapes
person josephynooby    schedule 21.01.2014    source источник
comment
Я не думаю, что это возможно с помощью CSS. Однако это возможно с svg.   -  person otinanai    schedule 21.01.2014

Ответы (4)


arrow_upward
4
arrow_downward

Вырезанный круг можно сделать только с помощью CSS, используя box-shadows. Следующая демонстрация имеет фиксированную высоту/ширину, но можно добиться того же вывода с размером в процентах и, следовательно, сделать его отзывчивым:

ДЕМО

выход :

вырезать круг с помощью CSS

body{
    background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
    background-size:cover;
}
div{
    width:600px; height:350px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    z-index:1;
}
div:before,div:after{
    content:'';
    position:absolute;    
}
div:before{   
    top:-50px; left:225px;
    width:150px; height:150px;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px #000;
    z-index:-1;
}
div:after{
    top:0;left:0;
    width:100%; height:100%;
    box-shadow: inset 0px -300px 600px -300px #fff;
}
<div></div>

person web-tiki    schedule 22.09.2014
comment
Изображение исчезло, можете ли вы загрузить изображение на imgur и использовать его в качестве замены? - person A.L; 15.07.2016

arrow_upward
2
arrow_downward

Вот версия только для CSS, использующая градиенты в качестве фоновых изображений.

Скрипка

div {
    width: 235px;
    height: 115px;
    border-radius: 6px 6px 0 0;
    background-color: #717172;
    background-image: 
        radial-gradient(center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%),
        linear-gradient(top, rgba(0,0,0,1) 0%, rgba(113,113,114,1) 100%);
    background-size: 128px 128px, 100%, 100%;
    background-position: center -54px, left top;
    background-repeat: no-repeat, repeat
}

(здесь пропущены префиксы поставщиков, но не в скрипке)

Для скептиков: CSS сильно повзрослел, просто проявите немного воображения. :)

person MildlySerious    schedule 21.01.2014
comment
большая проблема заключается в том, что bg не сплошной цвет, это изображение: S, а bg тела div должно быть полупрозрачным - person josephynooby; 21.01.2014
comment
Тогда вы захотите изучить SVG. :P Это не только CSS, но определенно веб-совместимый стандарт, на который вы можете опираться. - person MildlySerious; 21.01.2014
comment
@vals jsfiddle.net/Bruno_AFK/R6Rc9 я пытаюсь изменить ваш код и сделать то, что мне нужно, но теперь я все сделал только одно, верх не полностью прозрачен (этот круг), вы можете помочь? - person josephynooby; 22.01.2014

arrow_upward
-1
arrow_downward

Насколько я знаю, вы можете нарисовать только прямоугольник и добавить круг того же цвета, что и фон, чтобы имитировать эффект прозрачного круга. См. jsfiddle:

<div id="box">
    <div id="circle">
        &nbsp;
    </div>
</div>

body {background-color:Purple;}

#box {
    margin:5em;
    border-radius: 0.5em 0.5em 0 0;
    position:absolute;
    width:10em;
    height:5em;
    background:Black; /* default background */
    background:linear-gradient(to bottom, Black, #555);
}

#circle {
    margin-left:3em;
    border-radius:4em;
    position:absolute;
    top:-2em;
    width:4em;
    height:4em;
    background:Purple;
}

Измените цвет фона тега <body>, и вы увидите весь круг.

person A.L    schedule 21.01.2014

arrow_upward
-4
arrow_downward

Я исправлен! Вы МОЖЕТЕ создавать НЕКОТОРЫЕ сложные формы, используя только CSS3. Спасибо, что поделились всеми решениями.

Не обращайте внимания на следующее: нет, вы не можете создавать сложные фигуры, используя только CSS3. Вы можете создать их с помощью SVG или HTML5 Canvas. Если я правильно понимаю ваш вопрос, вы просто хотите добавить изображение с прозрачностью в качестве фонового изображения? Для этого просто создайте изображение с прозрачным фоном (.gif, .png, .svg) и используйте его. Изображения с прозрачными областями можно использовать с CSS3.

person EStafford    schedule 21.01.2014