CODEWITHSUNDEEP
htmlcsssvgimage-masking
NewKidOnTheBlock
NewKidOnTheBlock

Reputation: 1511

How to create two tone SVG mask and overlay

I am currently attempting to create a two SVG overlay / masking like the image below See below

I have created a Svg for the overlay. As it stands i am trying to create two elements one for the green side and one for the blue side.

I have almost achieve the effect using the clip css property it seems to be working however i have noticed when i decrease the screen size both SVG masks overlay each other and i lose the effect.

Also i not 100% sure about the css property transform: rotate; as I want to add text inside each div

For what i am trying to achieve is this the best approach, if it not what is?

Below is a snippet of my code, i have also added a link below with my code. 

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

Upvotes: 1

Views: 1178

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

You can also use css to achieve this using 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>

Upvotes: 2

Related Questions