CODEWITHSUNDEEP
htmlcssborderboxclipped
dave smith
dave smith

Reputation: 21

Border for a clipped box in css

I have a clipped box, that adds a diagonal line does the end of the box. I would like to add a border to it, but the border is also clipped.

Can I added a border to the clipped area using only CSS/html? So that the white has a black border before it meets the yellow?

.yellowclippedbox {
  background-color: #F1BE3E;
  color: #880000;
  clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
}

enter image description here

Upvotes: 1

Views: 222

Answers (1)

Mister Jojo
Mister Jojo

Reputation: 22310

that ?

body {
  background : lightblue;
  }
#my-div {
  width      : 200px;
  height     : 250px;
  margin     : 1em;
  background : yellow;
  position   : relative;
  border     : 5px solid green;
  } 
.yellowclippedbox:before {
  position   : absolute;
  top        : 0;
  left       : 50%;
  display    : block;
  content    : '';
  width      : 50%;
  height     : 100%;
  background : crimson;
  clip-path  : polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
  }
<div id="my-div" class="yellowclippedbox"></div>

Upvotes: 0

Related Questions