CSS Border with stroke pseudo element

user_14451548 0
Viewed 45

I've been trying to make a border around a div that has its own stroke too. Please see attached img. Any ideas on how to make it work?

.site-wrapper {
  position: relative;
  display: inline-block;
}

#siteWrapper {
  border-left: 1.5vw solid #3f9628 !important;
  border-bottom: 1.5vw solid #ffac58 !important;
}
#siteWrapper:before {
  content: '';
  position: absolute;
  z-index: 1;
  /*top: 0;*/
  left: -1.5vw;
  border-top: 1.5vw solid white;
  border-right: 1.5vw solid #3f9628;
  width: 0;
}
#siteWrapper:after {
  content: '';
  z-index:99;
  position: absolute;
  bottom: -1.5vw;
  right: 0;
  border-bottom: 1.5vw solid white;
  border-left: 1.5vw solid #ffac58;
  width: 0;
}

The wrapper has id's & class: id="siteWrapper" class="clearfix site-wrapper"

Website with wrapper div

border css
1 Answers

skew transformation can do it:

.box {
  --b: 3px; /* border width */
  
  height: calc(100vh - 50px);
  border: var(--b) solid red;
  background: grey;
  box-sizing: border-box;
  margin-left: 50px;
  position: relative;
}
.box:before,
.box:after {
  content: "";
  position: absolute;
  border: inherit;
  box-sizing: border-box;
}
.box:before {
  top: calc(-1*var(--b));
  bottom: calc(-1*var(--b));
  right: calc(100% + var(--b));
  border-right: 0;
  width: 50px;
  transform-origin: right;
  background: yellow;
  transform: skewY(-45deg);
}
.box:after {
  right: calc(-1*var(--b));
  left: calc(-1*var(--b));
  top: calc(100% + var(--b));
  border-top: 0;
  height: 50px;
  transform-origin: top;
  background: blue;
  transform: skewX(-45deg);
}

body {
  margin: 0;
}
<div class="box"></div>

user_86203330
Related