CODEWITHSUNDEEP
htmlcssclip-path
GLobeasd
GLobeasd

Reputation: 68

clip-path with border intact using pure css

I need to create cut corners, but at the same time the border of the shape in the places of the cut should be preserved, I tried to do this using clip-path, but I got a rectangle with cut corners and the border was cut together with them.

.bottominfo {
  bottom: 1.9%;
  left: 5.7%;
  background-color: rgba(204, 0, 2, 0.1);
  border: 1px solid #FF003C;
  position: absolute;
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
  width: 50vw;
  height: 11vw;
}
<div class="bottominfo"></div>

Upvotes: 1

Views: 846

Answers (1)

Kameron
Kameron

Reputation: 10856

One option would be to add a wrapper div and use another clip-path to make the border. Essentially what this does is mimic a border.

First, set the wrapper div with the background-color of the desired border-color. Then use the same clip-path on this new div and specify an inset value which will determine your border-width.

/* Center Demo */
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottominfo {
  background-color: #fddde6;
  position: absolute;
  inset: 1px; /* border width */
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}

.bottominfo-wrapper {
  background-color: #FF003C;
  position: relative;
  width: 50vw;
  height: 11vw;
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}
<div class="bottominfo-wrapper">
  <div class="bottominfo"></div>
</div>

Note: this will not work with your rgba background-color because it cannot have an opacity of .1. So instead I used a hex that is the same color.

Upvotes: 2

Related Questions