Вырезка из слоя на CSS

216
11 января 2017, 02:30

Пример на картинке. По центру кнопка, справа и слева полупрозрачные слои. Вопрос как сделать правую часть фона на чистом CSS, хочется сделать это без вставки картинки. Спасибо

Answer 1

Можно еще так. Но тут тоже есть проблемы:

  1. Какое-то замороченное масштабирование. Пока не разобрался.
  2. Полукруглый вырез сделан с помощью кривой Безье, это не окружность, а лишь приближение к окружности.

* { 
  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>

Answer 2

* { 
  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>

Answer 3

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

READ ALSO
Совместимость Bootstrap 3 c IE 9

Совместимость Bootstrap 3 c IE 9

Здравствуйте, пытаюсь адаптировать сайт под IEСперва он отображался как мобильная версия

154
Не умещаются &ldquo;%&rdquo; в круговой диаграмме google charts

Не умещаются “%” в круговой диаграмме google charts

Есть диаграммы , построенны с помощью google chartsПо умолчанию у они не отображаются(т

156
Модальные окна на bootstrap 3 обрамление ссылки

Модальные окна на bootstrap 3 обрамление ссылки

использую компонент модального окна, вызываю его ссылкой:

179
Анимация в обратном порядке

Анимация в обратном порядке

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

149