make rectangle shape using linear-gradient-CodePudding

What I'm trying to achieve is a green rectangle on the red rectangle, but the green rectangle should start at a lower point, not according to the height of the DIV and end before the red one.
Illustration:

#div_1{
  width: 200px;
  min-height: 35px;
  background:linear-gradient(to top, red 10%, transparent 10%), linear-gradient(90deg, blue 0% 10%,
    red 10% 15%,green 15% 80%,red 80% 85%
    ,blue 85% 100%);
}

<div id ="div_1"></div>

CodePudding user response：

#div_1{
   
  width: 400px;
  height: 100px;
  background:linear-gradient(to left, blue 15%, transparent 10%),linear-gradient(to right, blue 10%, transparent 10%), linear-gradient(to top, red 15%, transparent 10%),linear-gradient(to bottom, red 15%, transparent 10%), linear-gradient(90deg,blue 0% 10%,red 10% 15%,green 15% 80%,red 80% 85%
,blue 85% 100%);
}

<div id ="div_1"></div>