时间戳

首页 > 解决方案 > 如何在 HTML div 中添加透明凹槽？

css - 如何在 HTML div 中添加透明凹槽？

问题描述

我需要一个特殊形状的工作流组件。这是我同事的解决方案。

.workflow-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%; 
}
.item-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: green;
  flex-shrink: 0;
  border: 1px solid yellow;
}
     
.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-left: 40px;
  margin-left: -40px;
  border-left: none;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px; 
  background: radial-gradient(
  circle at 0px 20px,
  rgba(0, 0, 0, 0) 25px, red 25px)
  20px 0px no-repeat;
}
<div class="workflow-item">
  <div class="item-no"></div>
  <div class="content">
    <div class="item-text"></div>  
  </div>
</div>
<div class="connection"></div>

问题是右侧形状的凹槽是通过使用左侧白色的径向渐变制成的。但是我们不知道背景的颜色。所以我尝试用CSS clip-path和/或mask创建这个特殊的形状，但我没有做对。

如何在右侧创建形状以使其适用于任何背景？

标签： cssmaskshapesclip

解决方案

推荐阅读