codepens/break-out-of-parent-element-indented/dist/style.css

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  position: relative;
  z-index: 0;
}

body {
  padding: 1rem;
  background: whitesmoke;
  -webkit-font-smoothing: antialiased;
}

*:before, *:after {
  z-index: 1;
}

.wrap {
  max-width: 50vw;
  margin: 0 auto;
  background: white;
  outline: 1px solid #ccc;
  outline-offset: -1px;
  min-height: 80vh;
  padding: 2rem;
}
.wrap:after {
  content: '';
  position: absolute;
  display: block;
  outline: 1px dotted silver;
  top: 2rem;
  left: 2rem;
  bottom: 2rem;
  right: 2rem;
  z-index: -1;
}

.content {
  background: rgba(255, 69, 0, 0.5);
  height: 100px;
}

.breakout {
  background-image: url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ff6a33" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
  transition: all 600ms;
  font: caption;
  outline: 1px dotted silver;
}
.breakout h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 1.1rem;
}
.breakout:before, .breakout:after {
  transition: all 300ms;
}

[id="step1"]:checked ~ * .breakout {
  margin-left: calc(50%);
}
[id="step1"]:checked ~ * .breakout:before {
  content: '+50% margin';
  position: absolute;
  display: block;
  width: 100%;
  left: -100%;
  top: 50%;
  border-bottom: 1px dashed;
  text-align: center;
}
[id="step1"]:checked ~ * .breakout:after {
  content: '';
  position: absolute;
  display: block;
  left: 0;
  top: -1rem;
  height: calc(100% + 3rem);
  border-left: 1px dashed;
  text-align: center;
}

[id="step2"]:checked ~ * .breakout {
  margin-left: calc(50% - 50vw);
}
[id="step2"]:checked ~ * .breakout:before {
  content: '-50vw margin';
  position: absolute;
  display: block;
  width: 50vw;
  top: 50%;
  border-bottom: 1px dashed;
  text-align: center;
}
[id="step2"]:checked ~ * .breakout:after {
  content: '';
  position: fixed;
  display: block;
  left: calc(50% - 1px);
  top: 0;
  height: 100vh;
  border-left: 1px dashed silver;
  text-align: center;
  transition: none;
}

[id="step3"]:checked ~ * .breakout {
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw);
}
[id="step3"]:checked ~ * .breakout:before {
  content: '+50vw padding';
  position: absolute;
  display: block;
  width: 50vw;
  top: 50%;
  left: 0;
  border-bottom: 1px dashed;
  text-align: center;
}
[id="step3"]:checked ~ * .breakout:after {
  content: '';
  position: fixed;
  display: block;
  left: calc(50% - 1px);
  top: 0;
  height: 100vh;
  border-left: 1px dashed silver;
  text-align: center;
  transition: none;
}

[id="step4"]:checked ~ * .breakout {
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}
[id="step4"]:checked ~ * .breakout:before {
  content: '-50% padding';
  position: absolute;
  display: block;
  width: 50%;
  top: 50%;
  left: 0;
  border-bottom: 1px dashed;
  text-align: center;
  white-space: pre;
}
[id="step4"]:checked ~ * .breakout:after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  top: -1rem;
  height: calc(100% + 3rem);
  border-left: 1px dashed;
  text-align: center;
}

[id="step5"]:checked ~ * .breakout {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

pre {
  overflow: auto;
  display: none;
  font-size: 12px;
  background: whitesmoke;
  padding: 1.5rem;
  margin-top: 2rem;
  font-family: monospace;
}
pre span {
  color: #999;
}

[id="step0"]:checked ~ * pre:nth-of-type(1) {
  display: block;
}

[id="step1"]:checked ~ * pre:nth-of-type(2) {
  display: block;
}

[id="step2"]:checked ~ * pre:nth-of-type(3) {
  display: block;
}

[id="step3"]:checked ~ * pre:nth-of-type(4) {
  display: block;
}

[id="step4"]:checked ~ * pre:nth-of-type(5) {
  display: block;
}

[id="step5"]:checked ~ * pre:nth-of-type(6) {
  display: block;
}

input {
  position: fixed;
  top: -100px;
}

.prev, .next {
  width: 40px;
  text-align: center;
  position: absolute;
  bottom: 3rem;
}

.prev {
  right: 5.5rem;
}

.next {
  right: 3rem;
}

label {
  display: none;
  cursor: pointer;
}

svg {
  background: white;
  border-radius: 50%;
  border: 2px solid;
  padding: 4px;
  width: 32px;
  height: 32px;
}

[id="step1"]:checked ~ * .prev label:nth-of-type(1) {
  display: block;
}

[id="step2"]:checked ~ * .prev label:nth-of-type(2) {
  display: block;
}

[id="step3"]:checked ~ * .prev label:nth-of-type(3) {
  display: block;
}

[id="step4"]:checked ~ * .prev label:nth-of-type(4) {
  display: block;
}

[id="step5"]:checked ~ * .prev label:nth-of-type(5) {
  display: block;
}

[id="step0"]:checked ~ * .next label:nth-of-type(1) {
  display: block;
}

[id="step1"]:checked ~ * .next label:nth-of-type(2) {
  display: block;
}

[id="step2"]:checked ~ * .next label:nth-of-type(3) {
  display: block;
}

[id="step3"]:checked ~ * .next label:nth-of-type(4) {
  display: block;
}

[id="step4"]:checked ~ * .next label:nth-of-type(5) {
  display: block;
}

[id="step5"]:checked ~ * .next label:nth-of-type(6) {
  display: block;
}