Border for a clipped box in css

Question

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%);
}

Does this answer your question? [How to add border in my clip-path: polygon(); CSS style](https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style) — Jax-p, Dec 21 '21 at 13:38

score 0 · Answer 1 · answered Dec 21 '21 at 13:49

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>

Border for a clipped box in css

1 Answers1