css clip-path overlap and border - html

Question

Here is a codepen of what I did:
https://codepen.io/dickeddocks/pen/opWBwQ
and this is what I am trying to achieve:
a rough picture made in MS-Paint
so I am trying to make box 2, a div overlap box 1 which is also a div
and I want to make the yellow border cover the shape and not the container box. I did some research on stackoverflow and an answer to adding a border to a clip path shape was to add the the same clip path to the container.
But I am a little confused as the div itself is the container so why is the border not wrapping it.
html:
<div class="box-1">
BOX 1
</div>
<div class="box-2">
BOX 2
</div>
css:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: aqua;
}
.box-1 {
padding: 25vh;
background-color: aqua;
}
.box-2 {
z-index: 200;
-webkit-clip-path: polygon(50% -10%, 100% 11%, 100% 100%, 0 100%, 0 11%);
clip-path: polygon(50% -10%, 100% 11%, 100% 100%, 0 100%, 0 11%);
padding: 25vh;
background-color: aquamarine;
border-top: 10px solid yellow;
}

Answer 1

If you want to go with clip-path for this, you have to first make the second box overlap the first one by using negative margin or change the top value. Then you have to create the small arrow using pseudo element (you can read more about How do CSS triangles work?)
So you will have something like this (without clip path):
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: aqua;
}
.box-1 {
padding: 25vh;
background-color: aqua;
}
.box-2 {
z-index: 2;
position: relative;
margin-top: -50px;
padding: 25vh;
background-color: #dede3b;
border-top: 50px solid yellow;
}
.box-2:before {
content: "";
position: absolute;
border-bottom: 40px solid #dede3b;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
right: 50%;
margin-right: -50px;
top: -40px;
}
<div class="box-1">
BOX 1
</div>
<div class="box-2">
BOX 2
</div>
Then create the clip-path to hide the non needed part like this :
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: aqua;
}
.box-1 {
padding: 25vh;
background-color: aqua;
}
.box-2 {
z-index: 2;
position: relative;
margin-top: -50px;
padding: 25vh;
background-color: #dede3b;
border-top: 50px solid yellow;
clip-path: polygon(0% 40px, 0% 100%, 100% 100%, 100% 40px, calc(50% + 50px) 40px, 50% 0, calc(50% - 50px) 40px);
;
}
.box-2:before {
content: "";
position: absolute;
border-bottom: 40px solid #dede3b;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
right: 50%;
margin-right: -50px;
top: -40px;
}
<div class="box-1">
BOX 1
</div>
<div class="box-2">
BOX 2
</div>
Here is an illustration to understand the polygon I used for clip-path:
Here is another solution without using clip-path (which will work better with all the browser). The idea is to use 2 pseudo element to create the double arrow:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: aqua;
}
.box-1 {
padding: 25vh;
background-color: aqua;
}
.box-2 {
position: relative;
padding: 25vh;
background-color: #dede3b;
border-top: 10px solid yellow;
}
.box-2:before {
content: "";
position: absolute;
border-bottom: 50px solid yellow;
border-right: 60px solid transparent;
border-left: 60px solid transparent;
right: 50%;
margin-right: -60px;
top: -55px;
z-index: 1;
}
.box-2:after {
content: "";
position: absolute;
border-bottom: 40px solid #dede3b;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
right: 50%;
margin-right: -50px;
top: -40px;
z-index: 2;
}
<div class="box-1">
BOX 1
</div>
<div class="box-2">
BOX 2
</div>