html - 为由两个相邻 div 和剪辑路径生成的形状添加边框

Question

这是我的代码，我想在其中添加 2px 圆角边框。两个容器共享由剪辑路径和伪类生成的单一背景。当我向单个 div 添加边框时，它会被剪裁并且不会出现。

这就是我想要的边框

这里是边界应该如何四舍五入

#pool-container {
  padding: 10px;
  width: 200px;
  margin: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
  background: yellow;
  position:relative;
}

#side-step {
  height:80px;
  width:80px;
  transition:1s all;
}
#pool-container:hover #side-step{
  margin-left:150px;
}
#side-step, 
#main-pool {
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
#side-step::before, 
#main-pool::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}

#main-pool {
  width: 100%;
  height:150px;
}

<div id="pool-container">
  <div id="side-step"></div>
  <div id="main-pool"></div>
</div>

标签： htmlcss

Answer 1

使用一个额外的容器来保存背景，您可能有一个透明容器到 div 并添加来自该父级的阴影。边框（阴影）将围绕透明边缘绘制。

这是一个可能的例子：

#parent {
  width: max-content;
  background:linear-gradient(to bottom left, transparent,rgba(255,255,255,0.75),transparent,rgba(255,255,255,0.75),transparent,rgba(255,255,255,0.75)) yellow;
}

#pool-container {
  padding: 10px;
  width: 200px;
  margin: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  filter: drop-shadow(0px -2px 0px black) drop-shadow(0px 2px 0px black) drop-shadow(-2px 0px 0px black) drop-shadow(2px 0px 0px black)
}

#side-step {
  height: 80px;
  width: 80px;
  transition: 1s all;
}

#pool-container:hover #side-step {
  margin-left: 150px;
}

#side-step,
#main-pool {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#side-step::before,
#main-pool::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}

#main-pool {
  width: 100%;
  height: 150px;
}

<div id="parent"><!-- here comes the background -->
  <div id="pool-container"><!-- no background but drop shadow(s) -->
  <!-- next comes any shapes with a background -->
    <div id="side-step"></div>
    <div id="main-pool"></div>
  </div>
</div>

四舍五入的形状可能是另一个问题

受https://codepen.io/gc-nomade/details/HKEpo的启发，您也可以从单个元素开始并让文本降低

* {
  box-sizing: border-box;
  margin: 0;
}

#pool-container {
  padding: 10px;
  width: 220px;
  height: 250px;
  margin: 0 5px 0 5px;
  background: yellow;
  position: relative;
}

.buffer {
  background: inherit;
  height: 100%;
}

#pool-container:before,
#pool-container .buffer:before {
  width: 0;
  float:left;
  content: "";
  height: 80px;
  background: inherit;
  transition: 1s width;
  border-bottom: solid 2px;
}

#pool-container .buffer:before {
  float: right;
  width: 50%;
  border-left: 2px solid;
}


#pool-container:hover .buffer:before {
  width: 0;
}

#pool-container:hover:before {
  width: 50%;
}
#pool-container:before {
  box-shadow: 2px 0;
}

#main-pool {
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
  box-shadow: inset 0 0 0 2px;
}

#main-pool {
  height: 100%;
}

p {
  font-size: 15px;
  padding: 1em;
}

<div id="pool-container"><!-- floatting pseudo -->
  <div class="buffer"><!-- floatting pseudo -->
    <div id="main-pool">
      <p>Pellen tesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vesti bulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
    </div>
  </div>
</div>