html - How to achieve a responsive ribbon shape in CSS?

Question

Trying to achieve this with css. I've achieved in doing this but this breaks if my label (CAREER) is longer the size of the div. If its longer then the content wraps and the height of the div increases. But the left ribbon cut does not do that responsively. Can someone suggest a better approach?

.custom-tag-container {
  border: 1px solid;
  margin: auto;
  display: flex;
  align-items: stretch;
  border-color: green green green transparent;
  padding: 4px !important;
}

.custom-tag-container>p {
  color: green;
  font-weight: bold;
  flex: 1;
  margin: auto;
}

#triangle-left {
  height: 25px;
  width: 25px;
  background: transparent;
  transform: rotateZ(45deg) translateX(-12.5px) translateY(12.5px);
  border: 1px solid;
  border-color: green green transparent transparent;
}

<div class="custom-tag-container">
  <div id="triangle-left" />
  <p>Hello Worldsm</p>
</div>

Answer 1

Here is an idea that rely on skew transformation where it will be responsive and you will have transparency:

.box {
  height: 50px;
  border: 2px solid green;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  margin:5px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:0;
  height:50%;
  width:3px;
  background:green;
}
.box:before {
  top:0;
  transform:skew(45deg);
  transform-origin:top;
}
.box:after {
  bottom:0;
  transform:skew(-45deg);
  transform-origin:bottom;
}

<div class="box"></div>

<div class="box" style="height:80px"></div>