html - 使用透明 CSS 制作一个连接形状

Question

我无法将图标背景调整为透明，但父容器的透明边框两侧为黑色。附图说一千字。

我需要最终的作品看起来像下图。您可以更改标记。

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

尝试用 http://editor.method.ac/ 构建一个 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>

也许您需要对其进行更多编辑，但我认为这会对您有很大帮助。