adding border to a shape generated by two adjacent divs and clip-path

Question

here is my code where i want to add 2px border with rounded corners. two containers share single background generated by clip-path and pseudo classes. when i add borders to individual divs its clipped and does not appear.

here is how i want borders

and here is how borders should be rounded

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

how you want it to behave later? you sill want to move the top element? if so how? — Temani Afif, Jun 25 '20 at 22:08
i am moving it by taking inputs from form elements, like the position and size of top div — Zargham Khan, Jun 25 '20 at 22:11
yes but while you move the element, how the border should behave? and how you want the radius to behave too? — Temani Afif, Jun 25 '20 at 22:11
when top div is in center, one corner at top left of bottom div will appear i want that to be rounded and the internal corners formed between top and bottom div i want those to be rounded as well — Zargham Khan, Jun 25 '20 at 22:15
add more details to your question then, no one can understand all these requirements — Temani Afif, Jun 25 '20 at 22:16
would it be recommended to go for svg shapes for this problem ? i am struggling with the rounded corners — Zargham Khan, Jun 26 '20 at 06:28

G-Cyrillus · Accepted Answer · 2020-06-25T23:40:00.783

With an extra container holding the background, you may have a translucide container to both div and add a drop shadow from that parent. border (shadow) will be drawn around transparent edges .

here is a possible example :

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

rounding the shapes could be another question

inspired from https://codepen.io/gc-nomade/details/HKEpo , you could also do from a single element and have text fall lower

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

thanks a lot, drop-shadow comes to rescue, should i create another question for border-radius ? — Zargham Khan, Jun 26 '20 at 06:58

adding border to a shape generated by two adjacent divs and clip-path

1 Answers1