I have been tasked with a build that includes the following design. A gold frame with corner decorations.

Now, the divs this frame will be connected to will have a varied height and width. Using, for example, object-fit: contain would not work because the corner decorations will stretch and look misshapen.

The only real method I can think of is to break down each element and position them correctly. So as a quick example:

<div >
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
</div>

.container {
  background: grey;
  width: 300px;
  height: 400px;
  position: relative;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.corner {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
}

.corner__top--left {
  top: 20px;
  left: 20px;
}

.corner__top--right {
  top: 20px;
  right: 20px;
}

.corner__bottom--left {
  bottom: 20px;
  left: 20px;
}

.corner__bottom--right {
  bottom: 20px;
  right: 20px;
}

.line {
  position: absolute;
  background: blue;
}

.line__left {
  left: 20px;
  top: 70px;
  height: calc(100% - 140px);
  width: 5px;
}

.line__right {
  right: 20px;
  top: 70px;
  height: calc(100% - 140px);
  width: 5px;
}

.line__top {
  left: 70px;
  top: 20px;
  width: calc(100% - 140px);
  height: 5px;
}

.line__bottom {
  left: 70px;
  bottom: 20px;
  width: calc(100% - 140px);
  height: 5px;
}

I'm wondering am I not seeing the wood for the trees and missing a glaringly obvious solution to this? Or is my only solution to composite the image in this way to retain the correct ratios?

Any input would be appreciated.

CodePudding user response：

• Just use border-image.

  • The border-image property lets you use a single image and slice it up into a 9-grid where each cell represents a stretchable (or repeatable) border side.
  • 
  • Smol elements:
    

section {
    border-style       : solid;   
    border-image-slice : 88 99 98 105 fill;
    border-image-width : 88px 99px 98px 105px;
    border-image-outset: 0px 0px 0px 0px;
    
    /* stretch or repeat the sides, as per your preference: */
    border-image-repeat: stretch stretch;
    border-image-repeat: repeat repeat;
    
    border-image-source: url("https://i.stack.imgur.com/2LH7a.png");
    
    padding: 100px;
}

textarea {
    resize: both !important;
}

<section>

   <textarea rows="10" cols="20">Resize me!</textarea>

</section>