Овальная форма CSS, вырезанная из div

цель

Изображение выше — это то, что я пытаюсь создать, но у меня возникли некоторые трудности с овальной формой. Объяснение:

  • Строка меню представляет собой div с небольшим линейным градиентом (от темно-серого до прозрачно-светло-серого).
  • Изображение логотипа компании имеет прозрачный фон и будет располагаться «поверх» строки меню.
  • Овальный вырез должен совпадать с овалом логотипа и иметь прозрачный промежуток между ними, который будет показывать цвет фона (это меняется на каждой странице, оранжевый — это просто пример).

Я много раз пытался и потерпел неудачу с радиальным градиентом - мне удавалось вырезать круг, но я не мог понять, как сделать его овальным, а затем не мог заставить работать линейный градиент. См. код:

.circle {
    height: 10em;
    background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
    background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
}

Когда форма выреза и градиент отсортированы, логотип будет расположен сверху.

Буду признателен за любые предложения или решения jsfiddle, спасибо!

РЕДАКТИРОВАТЬ: jsfiddle здесь

РЕДАКТИРОВАТЬ 2: Решил проблему, немного изменив дизайн, спасибо тем, кто ответил. Я написал некоторый jquery, чтобы решить эту проблему - когда цветная область прокручивается вне поля зрения, овальная граница и граница заголовка будут выбирать цвет верхней части вместо прозрачности.

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


html jquery css css-shapes
person Jaz Parkyn    schedule 16.09.2013    source источник
comment
stackoverflow.com/a/14747815/1654265   -  person Andrea Ligios    schedule 16.09.2013
comment
Я отозвал закрытое голосование. И +1, на самом деле то, что вы пробовали, было источником вдохновения :)   -  person Andrea Ligios    schedule 17.09.2013
comment
Приятно слышать - и спасибо   -  person Jaz Parkyn    schedule 18.09.2013

Ответы (5)


arrow_upward
5
arrow_downward

Вы можете начать с этой Выполняемая демонстрация

Примечание. Я добавил небольшую анимацию для изменения цвета фона, чтобы сделать пространство между островом и блоком с вырезом действительно прозрачным.

HTML

<div class="cutout">
    <div class="island">
        <div id="circleText">Circle Text </div>
    </div>
</div>

CSS

.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px 150px at 50% 100%, 
                                transparent 100px, #555 50px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px 150px at 50% 50%, 
                                silver 90px, rgba(0, 0, 0, 0) 50px);
    height: 10em;
}
.island > div {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 30px;
    bottom: 30px;

    background: rgba(fff, 0, 0, 0.2);
    padding: 5px;    
    text-align: center;    
}

#circleText {
    padding-top: 30px;
    font-size: 1.5em;
}
person Andrea Ligios    schedule 17.09.2013
comment
Можете ли вы изменить свой ответ, чтобы можно было добавить тень внутри кривой? - person AmiNadimi; 01.04.2018
comment
@AmiNadimi просто используйте box-shadow ;) и проголосуйте, если это помогло - person Andrea Ligios; 02.04.2018

arrow_upward
2
arrow_downward

Попробуй это:

background: radial-gradient(ellipse at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);

jsfiddle здесь

person service-paradis    schedule 16.09.2013

arrow_upward
1
arrow_downward

Попробуйте это: http://css-tricks.com/the-shapes-of-css/

расположите его абсолютно поверх других частей меню

person Pownyan    schedule 16.09.2013
comment
Да, я уже находил эту веб-страницу полезной, но форма должна быть вырезной и прозрачной. Спасибо хоть - person Jaz Parkyn; 16.09.2013
comment
ой, извини. я неправильно понял вопрос - person Pownyan; 16.09.2013
comment
Что, если вы создали div того же цвета, что и фон, расположили его там, где вы хотите вырезать, а затем поместили поверх него другой div с логотипом? - person Pownyan; 16.09.2013
comment
Цвет фона будет меняться по мере прокрутки страницы, поэтому его нужно вырезать. - person Jaz Parkyn; 16.09.2013

arrow_upward
1
arrow_downward

Вы можете сделать что-то вроде этого:

.container{
    height: 10em;
    background: #76757e;
}

.ovalCutout{
    background:white;
    height:50px;
    width:100px;
    border-radius:50%;
    margin:0px auto;
    position:relative;
    top:120px;
}

http://jsfiddle.net/UwXKu/

person Conqueror    schedule 16.09.2013
comment
Хорошая идея, но поскольку цвет фона будет меняться по мере прокрутки страницы, это должен быть вырез с прозрачностью. Спасибо хоть - person Jaz Parkyn; 16.09.2013

arrow_upward
1
arrow_downward

Вы можете сделать это, составив 3 фона, центральный радиальный и линейные боковые.

Однако сложно сделать так, чтобы два типа градиентов точно совпадали; это будет выполнимо только в том случае, если градиент очень плавный.

.back {
    height: 100px;
    width: 1000px;
    padding: 0px;
    background-image: radial-gradient(200px 100px ellipse at 50% 100%, transparent 70px, 
               rgba(100, 100, 100, 0.8) 73px, 
               rgba(80, 80, 80, 1) 198px), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8)), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8));
    background-size: 200px 100px, 40% 100%, 40% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%, 0%, 100%;
    background-position-y: 100%;
}

демонстрация

person vals    schedule 16.09.2013
comment
Ваш код ломается в Firefox, овальный вырез заполняется градиентом; Спасибо за ответы. - person Jaz Parkyn; 17.09.2013