Search code examples
cssclip-path

How would I make a clip path for this design?

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

enter image description here

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.

Solution

  • 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:

    enter image description here

    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>