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: 30px 20px;
  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: 0px 0px 3px 3px rgba(0, 0, 0, .05);
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05);
  background-color:rgba(218,165,32,0.5);
}

.infoContainerB {
  margin: 10px 10px;
  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: 0px 0px 3px 3px rgba(0, 0, 0, .05);
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05);
  background-color:rgba(218,165,32,0.8);
}

.infoContainer p,
.infoContainerB p {
  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;
}

<div class="wrapper">
  <figure>
    <div class="infoContainer">
      <p>Howdy!!</p>
    </div>
    <div class="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