Клип-речевой пузырь с прозрачным фоном содержимого

Question

Я создал речевой пузырь-клип с границей (очень важно). Теперь я пытаюсь сделать фон содержимого прозрачным.

Вот мое текущее решение:

.background {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 3px;
  background-color: #639;
  background-color: rebeccaPurple;
  clip-path: url("#speechebubble-clip");
}

.clip {
  width: 180px;
  height: 180px;
  position: relative;
  background: #fff;
}

.clip {
  clip-path: url("#speechebubble-clip");
}

<div class="background">
  <div class="clip-wrap">
    <div class="clip">
      test
    </div>
  </div>
</div>

<svg class="clip-svg">
 <defs>
  <clipPath id="speechebubble-clip" clipPathUnits="objectBoundingBox">
  <path width="100%" height="100%" transform="scale(0.0045, 0.00385)" id="clip-mask" d="M34.1983772,243.81581 C35.2123618,243.81581 36.0373744,244.643759 36.0373744,245.661353 L36.0373744,260 L63.450348,244.064408 C63.7301493,243.901754 64.0488773,243.81581 64.3720879,243.81581 L233,243.81581 L233,2 L2,2 L2,243.81581 L34.1983772,243.81581 Z" />
  </clipPath>
 </defs>
</svg>

Можно ли было сделать прозрачный div для белого содержимого?

Answer 1

Если вы открыты для другой идеи, я бы рассмотрел использование нескольких фонов и clip-path для достижения этой цели:

body {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.bubble {
  width: 180px;
  height: 180px;
  margin:20px auto;
  position: relative;
  border:3px solid purple;
  background:
  linear-gradient(purple,purple) 0 100%/40px 20px no-repeat,
  linear-gradient(purple,purple) 100% 100%/100px 20px no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 50.5%) 40px 100%/40px 20px no-repeat;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 19px), 80px calc(100% - 19px), 40px 100%, 40px calc(100% - 19px), 0% calc(100% - 19px));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 19px), 80px calc(100% - 19px), 40px 100%, 40px calc(100% - 19px), 0% calc(100% - 19px));
}

<div class="bubble">
 some text
</div>

А вот еще одна идея, использующая псевдоэлемент, чтобы избежать clip-path:

body {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.bubble {
  width: 180px;
  height: 180px;
  margin:20px auto 60px;
  position: relative;
  border:3px solid purple;
  border-bottom:none;
  background:
  linear-gradient(to right,purple 20px,transparent 20px,transparent 80px,purple 0)0 100%/100% 2px  no-repeat;
  position:relative;
}
.bubble:before {
  content:"";
  position:absolute;
  bottom:-38px;
  left:17px;
  width:62px;
  height:40px;
  border-left:3px solid purple;
  background:linear-gradient(to bottom right,transparent calc(50% - 2px),purple calc(50% - 2px),purple 50%,transparent 0);
}

<div class="bubble">
 some text
</div>

Answer 2

Да, с вашим кодом в качестве основы можно получить прозрачность речевого пузыря (см. Прилагаемый фрагмент кода).

Вы не определили, хотите ли вы, чтобы речевой пузырь был полностью прозрачным или только определенный процент. Я установил его на 0,3, где 0 полностью прозрачен.

.background {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 3px;
  /*background-color: #639;*/
  /*background-color: red;*/
  clip-path: url("#speechebubble-clip");
}

.clip {
  width: 180px;
  height: 180px;
  position: relative;
  background: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: 5px solid purple;
}

.clip {
  clip-path: url("#speechebubble-clip");
}

<div class="background">
     <div class="clip-wrap">
        <div class="clip">
               test
        </div> 
     </div>  
  </div>

  <svg class="clip-svg">
   <defs>
    <clipPath id="speechebubble-clip" clipPathUnits="objectBoundingBox">
     <path width="100%" height="100%" transform="scale(0.0045, 0.00385)" id="clip-mask" d="M34.1983772,243.81581 C35.2123618,243.81581 36.0373744,244.643759 36.0373744,245.661353 L36.0373744,260 L63.450348,244.064408 C63.7301493,243.901754 64.0488773,243.81581 64.3720879,243.81581 L233,243.81581 L233,2 L2,2 L2,243.81581 L34.1983772,243.81581 Z" />
    </clipPath>
   </defs>
  </svg>