Css Transparent Gold Background

I've been struggling for days on how to achieve this transparent gold at the right side of the image below. That is what exactly look like in the PSD but when saving it as .PNG i

Solution 1:

You can achieve using css property transform.Hope this code helps.

.infoContainer {
  margin: 30px20px;
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 20px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */position:relative;

  /* non-essential styling */
  -webkit-box-shadow: 0px0px3px3pxrgba(0, 0, 0, .05);
  box-shadow: 0px0px3px3pxrgba(0, 0, 0, .05);
  background-color:rgba(218,165,32,0.5);
}

.infoContainerB {
  margin: 10px10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 20px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */position:relative;

  /* non-essential styling */
  -webkit-box-shadow: 0px0px3px3pxrgba(0, 0, 0, .05);
  box-shadow: 0px0px3px3pxrgba(0, 0, 0, .05);
  background-color:rgba(218,165,32,0.8);
}

.infoContainerp,
.infoContainerBp {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */position:absolute;
  top:30px;
}

.wrapper {
  font-family: 'Oswald', Arial, Sans;
  font-size: 16px;
  position: absolute;
}

<divclass="wrapper"><figure><divclass="infoContainer"><p>Howdy!!</p></div><divclass="infoContainerB"><p>Howdy B!!</p></div></figure></div>

Solution 2:

Using an appropriate value of mix-blend-mode on your overlay should do the trick; you can read more about all the values here.

Based on playing around a bit, I think mix-blend-mode: multiply; should work well, but you'll need to play around a bit to get the desired effect.

Keep in mind browser support is varied