-1

I'm trying to make custom corners on a rectangular box as responsive html. Each corner would be similar design, but it should be connected by normal outlines as in the image below. In addition, it must be responsive and scale according to the device. Nothing I've found online thus far explains quite how to accomplish this. Any help would be most appreciated! It should have text in the middle as per the image.

enter image description here

aMJay
  • 2,215
  • 6
  • 22
  • 34
David Gallant
  • 21
  • 2

1 Answers1

0

There are many ways to do this, one might be to use a grid layout.

This should be enough to get you started:

HTML

<div class="container">
  <div class="corner-tl"></div>
  <div class="side-t"></div>
  <div class="corner-tr"></div>

  <div class="side-l"></div>
  <div class="content">
    All the content goes in here
  </div>
  <div class="side-r"></div>

  <div class="corner-bl"></div>
  <div class="side-b"></div>
  <div class="corner-br"></div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 10px auto 10px;
  grid-template-rows: 10px auto 10px;
}
.corner-tl {
  background-image: url('top-left.png');
}
.side-t {
  background-image: url('top.png');
  background-repeat: repeat-x;
}
...
...
barro32
  • 2,559
  • 23
  • 36
  • Thanks so much @barro32 - this works but is quite messy (lots of padding, margin tweaking etc and looks horrible in explorer) - but in theory it works. Thanks! If anyone has a 'cleaner' solution, please post it? Thank you! – David Gallant May 23 '18 at 14:56