Make a a joined shape with transparency css - html

Question

I am having trouble adjusting the icon background to be transparent but the parent container to have black on the sides of the transparent border. The attached picture says a thousand words.
I need the final work to look like the picture below. You can change the markup.
* {
font-size: 16px;
}
.home-contact {
background-image: url('https://images.unsplash.com/photo-1518666452233-523dfa23d45e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ac4741c99f65e732e43ab8abb770fbbc');
width: 300px;
margin: 0 auto;
padding: 1rem;
}
.contact-num {
display: flex;
color: #999;
}
.icon-hold {
background: transparent;
border-radius: 100%;
border: 4px solid #000;
color: #000;
}
.icon-hold span {
padding: 1rem 1rem 0 1rem ;
font-size: 3rem;
}
.icon-text {
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icon-text span {
padding: 0 1rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid black;
border-bottom: 50px solid transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="home-contact">
<div class="home-contact-hold">
<div class="contact-num">
<div class="icon-hold">
<span class="fa fa-whatsapp"></span>
</div>
<div class="icon-text">
<span class="book-now">Book Now</span>
<span class="book-number">0701 000 659</span>
</div>
<div class="triangle-right"></div>
</div>
</div>
</div>

Answer 1

Try to build an svg with http://editor.method.ac/. I built it within 5 minutes and got this:
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<rect id="svg_2" height="154" width="283" y="112.984535" x="154.546395" stroke-width="19" stroke="#000" fill="#000000"/>
<ellipse stroke="#000" ry="77" rx="77" id="svg_1" cy="190.000002" cx="147" stroke-width="19" fill="#ffffff"/>
<line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_3" y2="195.361169" x2="526.856097" y1="110.309465" x1="440.258004" fill-opacity="null" stroke-opacity="null" stroke-width="19" fill="none"/>
<line stroke="#000" transform="rotate(90 483.83575439453125,226.28903198242193) " stroke-linecap="null" stroke-linejoin="null" id="svg_4" y2="269.60908" x2="527.39255" y1="182.968967" x1="440.278994" fill-opacity="null" stroke-opacity="null" stroke-width="19" fill="none"/>
<rect stroke="#000" transform="rotate(46.41851043701172 438.45388793945307,182.47454833984375) " id="svg_5" height="85.567163" width="98.453783" y="139.690958" x="389.226988" stroke-opacity="null" stroke-width="19" fill="#000000"/>
</g>
</svg>
Maybe you need to edit it a little more, but I think this will help you out a lot.

Answer 2

Something along the lines of
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="home-contact">
<div class="home-contact-hold">
<div class="contact-num">
<div class="icon-hold">
<span class="fa fa-whatsapp" style="background:transparent;"></span>
</div>
<div class="icon-text">
<span class="book-now">Book Now</span>
<span class="book-number">0701 000 659</span>
</div>
<div class="triangle-right"></div>
</div>
</div>
</div>
That will give you a transparent background for the FontAwesome-Icon. That fancy rounded thing around it you will have to figure out for yourself ;-)