How would I make a clip path for this design?-CodePudding

.test02 {
  text-align: center;
  color: #fff;
  background-color: orange;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 0.2rem 0;
}

.test {
  border: 2px solid orange;
  padding: 1rem;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  height: 5rem;
}

body {
  background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}

<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">

</div>

I know I want to make a clip-path for this but I don't know-how. This type of CSS styling is kinda advanced for me. I can make a border just fine but don't not know how you could make a border inside out if that makes sense.

CodePudding user response：

Just use two divs and give them this style

<div style="    background: black;    height: auto;    border: 1px solid black;    width: 30em;    border-top: 2em solid;    border-radius: 1.5em;    position: relative;">
    <div style="    position: absolute;    top: -2em;    text-align: center;    width: 100%;    color: white;    z-index: 10;    height: 2em;    padding: 5px;    box-sizing: border-box;">Your text</div>
    <div style="    height: 500px;    background: green;    border: 1px solid black;    border-radius: 1.5em;"></div>
</div>

If you want to use a background image there are many ways, use transparent borders and position the background with background-position: top -2em right 0. Or use a margin on the top of the child div(body), or use position absolute for both the header and body(the children). You can also use a padding-top and no borders.Or simply just use: //the image is not copyrighted

.main{
  background: url(https://i.postimg.cc/gkR1JM8t/rolv-skjaerpe-3r-Nz5-Sn-c-Ms-unsplash.jpg);
  height: auto;
  border-radius: 1em;
  position: relative;
  padding: 0.1em;
  background-size: cover;
}
.header{
  text-align: center;
  width: 100%;
  color: white;
  min-height: 2em;
  padding: 5px;
  box-sizing: border-box;
}
.body{
  height: 20em;
  background: white;
  border-radius: 1em;
}

<div class="main">
  <div class="header">Your text</div>
  <div class="body" style=""></div>
</div>

CodePudding user response：

Try this code:

clip-path: polygon(0 0, 100% 1%, 73% 69%, 28% 70%);

CodePudding user response：

You can use the following svg (added extra white stroke incase you are using dark theme) to clip out the unwanted parts and still have the background:

Then use the :before, :after to place this clipped div to the left and right.
Also using, transform: scaleX(-1) to flip the right corner.

.test02 {
  text-align: center;
  color: #fff;
  background-color: orange;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 0.2rem 0;
}

.test {
  border: 2px solid orange;
  padding: 1rem;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  height: 5rem;
  position: relative;
  color: white;
}

.test:before,
.test:after {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  top: -1px;
  background-color: orange;
  clip-path: url(#cp)
}

.test:before {
  left: 0;
}

.test:after {
  right: 0;
  transform: scaleX(-1);
}

body {
  background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}

<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">
</div>

<svg height="0">
    <defs>
        <clipPath id="cp">
            <path d="m0 0v20c2.7868e-5 -10.559 8.1925-19.308 18.729-20z" fill="black"/>
        </clipPath>
    </defs>
</svg>