Как создать двухцветную маску SVG и наложение

В настоящее время я пытаюсь создать два наложения/маскирования SVG, как на изображении ниже См. ниже

Я создал SVG для наложения. В нынешнем виде я пытаюсь создать два элемента: один для зеленой стороны, а другой для синей.

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

Также я не на 100% уверен в свойстве css transform: rotate;, так как я хочу добавить текст внутри каждого div

Для чего я пытаюсь достичь, это лучший подход, если это не то, что есть?

Ниже приведен фрагмент моего кода, я также добавил ссылку ниже с моим кодом.

    .hero-overlay {
       position: absolute;
        top: 0;
       height: 100%;
       width: 100%;
     -webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
      mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
      clip: rect(0px, 580px, 500px, 0px); }

    .mask-left {
      background-color: red; }

.mask-right {
   -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      background-color: blue; }

http://jsfiddle.net/newkidontheblock/72dL79bd/


svg html css image-masking
person NewKidOnTheBlock    schedule 14.04.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы также можете использовать css для достижения этого, используя box-shadow

.container {
  background: url(https://unsplash.imgix.net/photo-1425036458755-dc303a604201?q=75&fm=jpg&w=1080&fit=max&s=d8d14b1bb37691447e6cf7d4f5a16112) no-repeat;
  position: Relative;
  width: 100%;
  height: 300px;
  background-size: cover
}
.left,
.right {
  position: absolute;
  width: 49.5%;
  left: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.right {
  right: 0;
  left: auto;
}
.left:before,
.right:before {
  content: '';
  background: transparent;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  transform: translatey(-50%);
}
.left:before {
  left: calc(100% - 47px);
  box-shadow: 0px 0px 0px 391px rgba(0, 170, 177, 0.90)
}
.right:before {
  right: calc(100% - 47px);
  box-shadow: 0px 0px 0px 391px rgba(0, 179, 220, 0.90);
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

person Vitorino fernandes    schedule 14.04.2015
comment
Потрясающе @0_o глупый вопрос, но как мне сделать квадратными зеленые и синие элементы - person NewKidOnTheBlock; 14.04.2015
comment
Вы знаете, как это можно сделать с помощью svg? В идеале я хочу разместить контент в каждом div - person NewKidOnTheBlock; 14.04.2015