Пример на картинке. По центру кнопка, справа и слева полупрозрачные слои. Вопрос как сделать правую часть фона на чистом CSS, хочется сделать это без вставки картинки. Спасибо
3 ответа
Можно еще так. Но тут тоже есть проблемы:
- Какое-то замороченное масштабирование. Пока не разобрался.
- Полукруглый вырез сделан с помощью кривой Безье, это не окружность, а лишь приближение к окружности.
* {
padding: 0;
margin: 0;
}
body {
background-image: url(http://beerhold.it/400/300);
background-size: cover;
width: 100vw;
height: 100vh;
}
div {
width: 50vw;
height: 100vh;
position: relative;
}
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
<path d="M0 0 L0 100 L100 100 L100 0 Z M100,60 C 86.33,60 86.33,40 100,40 Z" style="fill-rule: nonzero; fill: rgba(255,255,255,.8);" />
</svg>
</div>
-
Приближение устраивает, там размер элемента не больше 50 px – Vyacheslav Potseluyko 9 янв '17 в 9:53
-
-
@Qwertiy уточните, что имеется в виду. Мне Ваша мысль непонятна – Vyacheslav Potseluyko 9 янв '17 в 10:23
-
-
@VyacheslavPotseluyko, речь об атрибуте
d
тегаpath
.C
- это curve - кривая Безье. Точно задать ей окружность невозможно - можно лишь приближённо. И об этом сказано в ответе. Но ведь естьa
- arc, при помощи чего можно задать дугу. Если нужна полная окружность (не рассматривал детально), то следует поставить две дуги подряд. Вроде кажется логичным. Вот я и спросил, были ли какие-то причины так не сделать. – Qwertiy♦ 9 янв '17 в 10:26
* {
padding: 0;
margin: 0;
}
body {
background-image: url(http://beerhold.it/400/306);
background-size: cover;
}
.block {
width: 50vw;
height: 100vh;
position: relative;
background-color: rgba(0,0,0,.5);
}
.key {
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: 4em;
height: 4em;
box-sizing: border-box;
border: .5em solid black;
background-color: white;
border-radius: 4em;
}
<div class="block">
<div class="key">
</div>
</div>
-
@AndreyFedotov, я виимо хреново объясняю. Посмотрите, пожалуйста, на вторую фотку в посте. Может так понятнее будет. Спасибо – Vyacheslav Potseluyko 8 янв '17 в 13:57
-
@VyacheslavPotseluyko да, так более понятно. нужна ли адаптивность? – Andrey Fedorov 8 янв '17 в 14:21
-
в идеале да, иначе б сделал картинкой и забил. Но с этим сам разберусь, подскажите с реализацией хотя бы этого. Спасибо) – Vyacheslav Potseluyko 8 янв '17 в 14:44
-
@VyacheslavPotseluyko нужно эмулировать бэкграудом кнопки общий бэкграунд. Подобрав позиции бэкграундов можно добиться иллюзии прозрачности кнопки. Но сделать это адаптивно почти нереально. – Andrey Fedorov 8 янв '17 в 14:55
-
.wrapper {
width: 960px;
height: 720px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background-image: url(http://beerhold.it/960/722);
background-repeat: no-repeat;
backgorund-position: center center;
position: relative;
}
.key {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10em;
height: 10em;
border: 2em solid rgba(255, 255, 255, .5);
background-image: url(http://beerhold.it/960/722);
background-size: 960px 720px;
background-position: center center;
border-radius: 10em;
}
.block1,
.block2 {
position: absolute;
top: 0;
width: 480px;
height: 720px;
}
.block1 {
left: 0;
background-color: rgba(255, 255, 0, .4);
}
.block2 {
right: 0;
background-color: rgba(0, 0, 255, .4);
}
<div class="wrapper">
<div class="block1"></div>
<div class="block2"></div>
<div class="key"></div>
</div>
-
@AndreyFedotov, как Вы считаете, вариант с использованием
clip-path: circle(50% at 0 50%);
может подойти? – Vyacheslav Potseluyko 9 янв '17 в 8:43 -
@VyacheslavPotseluyko Не может, потому что вот caniuse.com/#search=clip-path – Andrey Fedorov 9 янв '17 в 8:51
-
я морально готов забить на семейство ie. Только нужен в итоге polygon, одна из границ которого будет вогнутой полуокружностью – Vyacheslav Potseluyko 9 янв '17 в 8:59