Board Thread:Support Requests - Getting Technical/@comment-27075564-20190720023122

So I'm not sure if this is easily done, but I'm trying to mimic the first shape in the image here (where the top right and bottom left corners are cut into triangles) but then have a stroke around it like in the right half of the second shape. The main concern are the cut corners: they have to maintain that ratio and the shape needs to be flexible so it can either stretch across a page or be made smaller if necessary. For that reason I really can't use svg files and remove the aspect ratio as some cases, if the box gets too long, the corners will stretch out rather than maintaining that nice 45 degree at the corners. I've created this CSS so far for the shape:

.top-row { height: 30px; width: 100%; display: table-row; }

.top-center { background-color: #ffef00; height: 30px; width: 100%; display: table-cell; }

.top-right { width: 0; height: 0; border-bottom: 30px solid #ffef00; border-right: 30px solid transparent; display: table-cell; } .box-content { background-color: #ffef00; padding: 0px 20px; }

.bottom-row { height: 30px; width: 100%; display: table-row; }

.bottom-left { width: 0; height: 0; border-top: 30px solid #ffef00; border-left: 30px solid transparent; }

.bottom-center { background-color: #ffef00; height: 30px; width: 100%; display: table-cell; }

But need to figure out how to either mimic a slightly smaller one on top, or find a different way to create the stroked shape (I did try to look at that page's code, but it's got so many display flexes going on I'm not even sure how to easily mimic it). Or is there another way to make svg behave while still being able to stretch to fill for y or x axis (or both)? 