Html 使用透明css创建连接的形状

我无法将图标背景调整为透明，但将父容器的透明边框两侧设置为黑色。所附图片上写着一千个字

我需要最后的工作，看看下面的图片。您可以更改标记

*{
字体大小：16px；
}
.家庭联络{
背景图像：url（'https://images.unsplash.com/photo-1518666452233-523dfa23d45e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=熵&cs=tinysrgb&w=400&fit=max&ixid=EYJHCHBAWQIOJE0NTG5FQ&s=ac4741c99f65e732e43ab8abb770fbbc'）；
宽度：300px；
保证金：0自动；
填充：1rem；
}
.contact num{
显示器：flex；
颜色：#999；
}
.图标保持{
背景：透明；
边界半径：100%；
边框：4px实心#000；
颜色：#000；
}
.图标保持范围{
填充：1rem 1rem 0 1rem；
字体大小：3rem；
}
.图标文本{
背景：#000；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
.图标文本范围{
填充：0 1rem；
文本转换：大写；
字母间距：0.1rem；
}
.直角三角形{
宽度：0；
身高：0；
边框顶部：50px实心透明；
左边框：50px纯黑；
边框底部：50px实心透明；
}

现在预订
0701 000 659

类似于

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

现在预订
0701 000 659

这将给你一个透明的图标背景。围绕着它的那个奇特的圆形东西，你必须自己去弄清楚；-）

尝试使用构建svg。我在5分钟内建成了它，得到了以下结果：

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

背景
第一层

---

也许你需要再编辑一点，但我认为这会对你有很大帮助。

我正在寻找连接圆形和矩形黑色背景的圆形边框。我通过

删除了黄色背景。home contact

bg因为它混淆了答案。请参阅所附的背景图片。我需要有透明度的图标所有的方式向后。