Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <article>
  <h1><div class="container">Hytale UI Kitchen Sink</div></h1>
  <section>
    <p>Hi there, and welcome to this codepen where I try to recreate some of the UI elements shown in WIP-Screenshots of Hytale in HTML and CSS.</p>
    <p>This is a work in progress, so new stuff is currently being implemented and sometimes things may go boom, or rather not work, or look strange or something. You have been warned. :D</p>
  </section>

  <h2><div class="container">Content Boxes</div></h2>
  <section id="content-boxes" class="container">
    <div class="hui box">
      <header>This is the headline</header>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu metus dui. Etiam scelerisque felis quis sapien iaculis, in sagittis erat tincidunt. Praesent lectus eros, lacinia ut turpis eget, gravida volutpat ipsum. Nunc ligula sapien, scelerisque in dolor eu, interdum congue lorem. Phasellus ut purus urna. Praesent at molestie sapien. Vestibulum arcu quam, porttitor hendrerit vestibulum vel, hendrerit vitae augue. Integer ac elementum elit, sit amet viverra quam. Nunc porta et urna at volutpat. Aliquam varius convallis diam. Vestibulum tempus mi ut orci euismod, ut ullamcorper lacus malesuada. Sed ac dui ullamcorper, lobortis urna non, rutrum odio. Pellentesque rutrum gravida urna a faucibus. Nullam viverra vulputate orci, nec pharetra nisi pharetra eu. Sed luctus augue vel congue maximus.</p>
        <p>Fusce vitae erat vitae magna congue iaculis nec sit amet ligula. Morbi ullamcorper semper lectus, id finibus augue fringilla et. Nulla lacus tortor, efficitur quis dolor ornare, bibendum blandit nisi. Vivamus lacinia, lectus sit amet laoreet interdum, ante nisl ullamcorper nulla, eget eleifend purus nisi quis diam. Maecenas odio eros, efficitur nec semper nec, lobortis at mi. Aenean consequat ante dui, eu sodales neque hendrerit vitae. Pellentesque ultricies facilisis felis ac convallis. Suspendisse quis fermentum magna. Pellentesque sollicitudin ac dui quis vulputate. Phasellus consequat eget ante non volutpat. Vivamus lacinia pharetra tellus, sit amet cursus purus commodo ac. Donec nunc est, suscipit ac auctor in, fringilla dictum turpis. Nunc feugiat in leo non vulputate.</p>
      </div>
    </div>
    <div class="controller">
      <label>
        <div class="label">Width</div>
        <input class="input" type="range" id="content-box-width" min="20" max="100" step="5" value="100">
        <span class="value">100%</span>
      </label>
    </div>
  </section>

  
  <h2><div class="container">Dividers</div></h2>
  <section id="dividers"  class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu metus dui. Etiam scelerisque felis quis sapien iaculis, in sagittis erat tincidunt. Praesent lectus eros, lacinia ut turpis eget, gravida volutpat ipsum. Nunc ligula sapien, scelerisque in dolor eu, interdum congue lorem. Phasellus ut purus urna. Praesent at molestie sapien. Vestibulum arcu quam, porttitor hendrerit vestibulum vel, hendrerit vitae augue.</p>
    <hr class="hui">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu metus dui. Etiam scelerisque felis quis sapien iaculis, in sagittis erat tincidunt. Praesent lectus eros, lacinia ut turpis eget, gravida volutpat ipsum. Nunc ligula sapien, scelerisque in dolor eu, interdum congue lorem. Phasellus ut purus urna. Praesent at molestie sapien. Vestibulum arcu quam, porttitor hendrerit vestibulum vel, hendrerit vitae augue. Integer ac elementum elit, sit amet viverra quam. Nunc porta et urna at volutpat. Aliquam varius convallis diam. Vestibulum tempus mi ut orci euismod, ut ullamcorper lacus malesuada. Sed ac dui ullamcorper, lobortis urna non, rutrum odio. Pellentesque rutrum gravida urna a faucibus. Nullam viverra vulputate orci, nec pharetra nisi pharetra eu. Sed luctus augue vel congue maximus.</p>
    <div class="controller">
      <label>
        <div class="label">Width</div>
        <input class="input" type="range" id="control-divider-width" min="20" max="100" step="5" value="100">
        <span class="value">100%</span>
      </label>
      <label>
        <div class="label">Style</div>
        <select class="input" id="control-divider-style">
          <option value="default">Default</option>
          <option value="arrow-down">Downwards arrow</option>
          <option value="arrow-up">Upwards arrow</option>
          <option value="diamond">Diamond</option>
        </select>
      </label>
      <label>
        <div class="label">Color</div>
        <select class="input" id="control-divider-color">
          <option value="default">Default</option>
          <option value="water">Water</option>
          <option value="fire">Fire</option>
          <option value="wind">Wind</option>
          <option value="earth">Earth</option>
          <option value="lightning">Lightning</option>
          <option value="void">Void</option>
        </select>
      </label>
    </div>    
  </section>    

  <h2><div class="container">Frames</div></h2>
  <section id="frames"  class="container">
    <figure class="hui frame">
      <img src="https://cdn.hytale.com/5e7b9eb650cbcd001176c5bb_8___fleeing_from_scaraks.png" alt="Ach! Hans, run! It’s a scarak!">
      <figcaption>Ach! Hans, run! It’s a scarak!</figcaption>
    </figure>
  </section>
</article>


              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --showcase-bg-color: hsl(220, 40%, 15%);
  --showcase-text-color: hsl(220, 10%, 90%);

  --hui-box-shadow-light: 0 0 5px 5px hsla(0, 0%, 0%, 0.15);
  --hui-box-shadow-normal: 0 0 5px 5px hsla(0, 0%, 0%, 0.3);
  --hui-box-shadow-dark: 0 0 5px 5px hsla(0, 0%, 0%, 0.6);
  
  --hui-content-box-outer-border-color: hsl(220, 17%, 18%);
  --hui-content-box-outer-bg-color: hsl(220, 21%, 6%);
  --hui-content-box-header-bg-color: hsl(220, 37%, 25%);
  --hui-content-box-header-border-color: hsl(220, 24%, 32%);
  --hui-content-box-header-font-color: hsl(220, 12%, 88%);
  --hui-content-box-header-font-glow-color: hsl(220, 12%, 44%);
  --hui-content-box-content-outer-border-color: hsl(220, 16%, 15%);
  --hui-content-box-content-inner-border-color: hsl(220, 38%, 20%);
  --hui-content-box-content-bg-color: hsl(220, 38%, 14%);

  --hui-divider-core-color: hsl(44, 45%, 42%);
  --hui-divider-edge-color: hsl(44, 45%, 30%);
  --hui-divider-arrow-color: hsl(44, 45%, 42%);
  --hui-divider-line-thickness: 2px;
  --hui-divider-endpoint-size: 8px;
  --hui-divider-endpoint-padding: 20px;
  --hui-divider-edge-padding: 9px;
  --hui-divider-edge-thickness: 2px;
  --hui-divider-edge-length: 9px;
  --hui-divider-arrow-size: 13px;

  --hui-frame-color: hsl(0, 0%, 100%);
  --hui-frame-padding: 16px;
  --hui-frame-thickness: 2px;
  --hui-corner-depth: 12px;
}

html {
  color: var(--showcase-text-color);
  background-color: var(--showcase-bg-color);
  padding-bottom: 5em;
}

body {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  .container {
    margin: 0 auto;
    max-width: 1000px;
    position: relative;
    
    .controller {
      position: absolute;
      background-color: rgba(0,0,0,0.5);
      width: 14em;
      padding: 0.5em;
      border-radius: 0.5em;
      top: 0;
      left: -16em;
      font-family: monospace;
      
      > label {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        padding-bottom: 0.25em;
        
        .label {
          padding: 0.2em 0.4em;
          flex: 0 0 100%;
        }
        
        .input {
          flex: 1 1 70%;
        }
        
        .value {
          text-align: right;
          flex: 0 0 25%;
        }        
      }
    }
  }
  & > article {
    & > section {
      margin: 0 auto;
      max-width: 1000px;
      margin-bottom: 4em;
    }
  }
}

figure {
  max-width: 500px;
  
  img {
    max-width: 100%;
  }
}

p {
  line-height: 1.5em;
  padding: 0.5em 0;
  text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0 1em 0;
}

h1 {
  font-size: 2em;
  font-weight: 700;
}

h2 {
  margin-top: 2em;
  background: linear-gradient(180deg, #000 0px, #000 2px, rgba(0,0,0,0.5) 3px, transparent 12px, transparent, calc(100% - 1px), rgba(255,255,255,0.2) 100%) top center no-repeat,
    rgba(0,0,0,0.3);
  padding: 1em 0;
  font-size: 1.6em;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
}

h4 {
  font-size: 1.2em;
}

.cols-2 {
  display: flex;
  flex-flow: column no-wrap;

  .col {
    flex: 0 0 50%;
  }
}

#content-boxes {
  --showcase-content-box-width: 100%;
  
  .hui.box {
    width: var(--showcase-content-box-width);
  }
}

#dividers {
  --showcase-divider-width: 100%;
  
  hr.hui {
    width: var(--showcase-divider-width);
  }
}

.hui {
  
  &.box {
    --hui-content-box-corner-size: 20px;

    @fragment-value-background-decoration-corner-ne:
      linear-gradient(0deg, var(--hui-content-box-header-bg-color), var(--hui-content-box-header-bg-color)) ~"calc(100% - 2px) 2px / 3px 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"top right / 7px 7px" no-repeat,
      linear-gradient(225deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"top right / var(--hui-content-box-corner-size) 3px" no-repeat,
      linear-gradient(225deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"top right / 3px var(--hui-content-box-corner-size)" no-repeat;
    @fragment-value-background-decoration-corner-nw:
      linear-gradient(0deg, var(--hui-content-box-header-bg-color), var(--hui-content-box-header-bg-color)) ~"2px 2px / 3px 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"top left / 7px 7px" no-repeat,
      linear-gradient(135deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"top left / var(--hui-content-box-corner-size) 3px" no-repeat,
      linear-gradient(135deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"top left / 3px var(--hui-content-box-corner-size)" no-repeat;
    @fragment-value-background-decoration-corner-se:
      linear-gradient(0deg, var(--hui-content-box-header-bg-color), var(--hui-content-box-header-bg-color)) ~"calc(100% - 2px) calc(100% - 2px) / 3px 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"bottom right / 7px 7px" no-repeat,
      linear-gradient(315deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"bottom right / var(--hui-content-box-corner-size) 3px" no-repeat,
      linear-gradient(315deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"bottom right / 3px var(--hui-content-box-corner-size)" no-repeat;
    @fragment-value-background-decoration-corner-sw:
      linear-gradient(0deg, var(--hui-content-box-header-bg-color), var(--hui-content-box-header-bg-color)) ~"2px calc(100% - 2px) / 3px 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"bottom left / 7px 7px" no-repeat,
      linear-gradient(45deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"bottom left / var(--hui-content-box-corner-size) 3px" no-repeat,
      linear-gradient(45deg, var(--hui-content-box-header-border-color) 11px, transparent 11px) ~"bottom left / 3px var(--hui-content-box-corner-size)" no-repeat;
    @fragment-value-background-beveled-box-ne-nw-outline:
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"top center / calc(100% - (var(--hui-content-box-corner-size) * 2)) 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"bottom center / 100% 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"bottom left / 3px calc(100% - var(--hui-content-box-corner-size))" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-border-color), var(--hui-content-box-header-border-color)) ~"bottom right / 3px calc(100% - var(--hui-content-box-corner-size))" no-repeat,
      linear-gradient(135deg, transparent ~"calc(50% - 2px)", var(--hui-content-box-header-border-color) ~"calc(50% - 1px)", var(--hui-content-box-header-border-color) ~"calc(50% + 1px)", transparent ~"calc(50% + 2px)") ~"top left / var(--hui-content-box-corner-size) var(--hui-content-box-corner-size)" no-repeat,
      linear-gradient(225deg, transparent ~"calc(50% - 2px)", var(--hui-content-box-header-border-color) ~"calc(50% - 1px)", var(--hui-content-box-header-border-color) ~"calc(50% + 1px)", transparent ~"calc(50% + 2px)") ~"top right / var(--hui-content-box-corner-size) var(--hui-content-box-corner-size)" no-repeat;
    @fragment-value-background-beveled-box-ne-nw-bg:
      linear-gradient(0deg, var(--hui-content-box-header-bg-color), var(--hui-content-box-header-bg-color)) ~"top center / calc(100% - (var(--hui-content-box-corner-size) * 2)) 100%" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-header-bg-color), var(--hui-content-box-header-bg-color)) ~"bottom left / 100% calc(100% - var(--hui-content-box-corner-size))" no-repeat,
      linear-gradient(135deg, transparent 50%, var(--hui-content-box-header-bg-color) 50%) ~"top left / var(--hui-content-box-corner-size) var(--hui-content-box-corner-size)" no-repeat,
      linear-gradient(225deg, transparent 50%, var(--hui-content-box-header-bg-color) 50%) ~"top right / var(--hui-content-box-corner-size) var(--hui-content-box-corner-size)" no-repeat;
    @fragment-value-background-beveled-box-se-sw-outer-border:
      linear-gradient(90deg, var(--hui-content-box-content-outer-border-color) 0%, var(--hui-content-box-content-outer-border-color) ~"calc(50% - 10px)", transparent ~"calc(50% - 10px)", transparent ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 7px)", transparent ~"calc(50% + 7px)", transparent ~"calc(50% + 10px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 10px)") ~"top left / 100% 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-outer-border-color) 0%, var(--hui-content-box-content-outer-border-color) ~"calc(50% - 10px)", transparent ~"calc(50% - 10px)", transparent ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 7px)", transparent ~"calc(50% + 7px)", transparent ~"calc(50% + 10px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 10px)") ~"right 6px / 3px calc(100% - 25px - 6px)" no-repeat,
      linear-gradient(90deg, var(--hui-content-box-content-outer-border-color) 0%, var(--hui-content-box-content-outer-border-color) ~"calc(50% - 10px)", transparent ~"calc(50% - 10px)", transparent ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 7px)", transparent ~"calc(50% + 7px)", transparent ~"calc(50% + 10px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 10px)") ~"bottom center / calc(100% - 50px) 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-outer-border-color) 0%, var(--hui-content-box-content-outer-border-color) ~"calc(50% - 10px)", transparent ~"calc(50% - 10px)", transparent ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% - 7px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 7px)", transparent ~"calc(50% + 7px)", transparent ~"calc(50% + 10px)", var(--hui-content-box-content-outer-border-color) ~"calc(50% + 10px)") ~"left 6px / 3px calc(100% - 25px - 6px)" no-repeat,
      linear-gradient(225deg, var(--hui-content-box-content-outer-border-color) 50%, transparent 50%) ~"left calc(100% - 9px) / 3px var(--hui-content-box-corner-size)" no-repeat,
      linear-gradient(225deg, var(--hui-content-box-content-outer-border-color) 50%, transparent 50%) ~"9px bottom / var(--hui-content-box-corner-size) 3px" no-repeat,
      linear-gradient(135deg, var(--hui-content-box-content-outer-border-color) 50%, transparent 50%) ~"right calc(100% - 9px) / 3px var(--hui-content-box-corner-size)" no-repeat,
      linear-gradient(135deg, var(--hui-content-box-content-outer-border-color) 50%, transparent 50%) ~"calc(100% - 9px) bottom / var(--hui-content-box-corner-size) 3px" no-repeat;
    @fragment-value-background-beveled-box-se-sw-outline:
      linear-gradient(0deg, var(--hui-content-box-content-inner-border-color), var(--hui-content-box-content-inner-border-color)) ~"6px 6px / calc(100% - 12px) 3px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-inner-border-color), var(--hui-content-box-content-inner-border-color)) ~"calc(100% - 6px) 6px / 3px calc(100% - 22px)" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-inner-border-color), var(--hui-content-box-content-inner-border-color)) ~"6px 6px / 3px calc(100% - 22px)" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-inner-border-color), var(--hui-content-box-content-inner-border-color)) ~"16px calc(100% - 6px) / calc(100% - 32px) 3px" no-repeat,
      linear-gradient(45deg, transparent 7px, var(--hui-content-box-content-inner-border-color) 7px, var(--hui-content-box-content-inner-border-color) 9px, transparent 10px) 6px ~"calc(100% - 6px) / 10px 10px" no-repeat,
      linear-gradient(315deg, transparent 7px, var(--hui-content-box-content-inner-border-color) 7px, var(--hui-content-box-content-inner-border-color) 9px, transparent 10px) ~"calc(100% - 6px) calc(100% - 6px) / 10px 10px" no-repeat;
    @fragment-value-background-beveled-box-se-sw-bg:
      linear-gradient(45deg, transparent 7px, var(--hui-content-box-content-bg-color) 7px) ~"6px calc(100% - 6px) / 10px 10px" no-repeat,
      linear-gradient(315deg, transparent 7px, var(--hui-content-box-content-bg-color) 7px) ~"calc(100% - 6px) calc(100% - 6px) / 10px 10px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-bg-color), var(--hui-content-box-content-bg-color)) ~"center calc(100% - 6px) / calc(100% - 32px) 10px" no-repeat,
      linear-gradient(0deg, var(--hui-content-box-content-bg-color), var(--hui-content-box-content-bg-color)) ~"center 6px / calc(100% - 12px) calc(100% - 22px)" no-repeat;

    @fragment-value-background-decoration-corners-n:
      @fragment-value-background-decoration-corner-ne,
      @fragment-value-background-decoration-corner-nw;
    @fragment-value-background-decoration-corners-s:
      @fragment-value-background-decoration-corner-se,
      @fragment-value-background-decoration-corner-sw;
    @fragment-value-background-beveled-box-header:
      @fragment-value-background-beveled-box-ne-nw-outline,
      @fragment-value-background-beveled-box-ne-nw-bg;

    background-color: var(--hui-content-box-outer-bg-color);
    border: 3px solid var(--hui-content-box-outer-border-color);
    box-shadow: var(--hui-box-shadow-light);
    border-radius: 10px;
    padding: 3px;
    margin: 10px 0 10px 0;

    > header {
      padding: 0.8em 1.6em;
      color: var(--hui-content-box-header-font-color);
      border-radius: 4px 4px 0 0;
      background-color: transparent;
      background:
        @fragment-value-background-decoration-corners-n,
        @fragment-value-background-beveled-box-header;
      text-transform: uppercase;
      text-shadow: 0 0 0.5em var(--hui-content-box-header-font-glow-color);
    }
    > .content {
      margin-top: 3px;
      padding: 1.2em 1.5em;
      color: var(--hui-content-box-header-font-color);
      border-radius: 0 0 4px 4px;
      background-color: transparent;
      background:
        @fragment-value-background-beveled-box-se-sw-outer-border,
        @fragment-value-background-decoration-corners-s,
        @fragment-value-background-beveled-box-se-sw-outline,
        @fragment-value-background-beveled-box-se-sw-bg;
    }
  }
  
  hr& {
    @fragment-value-background-divider-horizontal-line:
      linear-gradient(90deg, var(--hui-divider-core-color), var(--hui-divider-core-color)) ~"center / calc(100% - (var(--hui-divider-endpoint-padding) * 2)) var(--hui-divider-line-thickness)" no-repeat;
    @fragment-value-background-divider-horizontal-line-open:
      linear-gradient(90deg, var(--hui-divider-core-color) calc(50% - (var(--hui-divider-arrow-size) - 1px)), transparent calc(50% - (var(--hui-divider-arrow-size) - 1px)), transparent calc(50% + (var(--hui-divider-arrow-size) - 1px)), var(--hui-divider-core-color) calc(50% + (var(--hui-divider-arrow-size) - 1px))) ~"center / calc(100% - (var(--hui-divider-endpoint-padding) * 2)) var(--hui-divider-line-thickness)" no-repeat;
    @fragment-value-background-divider-horizontal-arrow-down:
      linear-gradient(45deg, transparent 50%, var(--hui-divider-core-color) 50%, var(--hui-divider-core-color) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(50% + 3px), var(--hui-divider-arrow-color) calc(50% + 3px)) ~"calc(50% - (var(--hui-divider-arrow-size) / 2)) calc(50% + (var(--hui-divider-arrow-size) / 2)) / var(--hui-divider-arrow-size) var(--hui-divider-arrow-size)" no-repeat,
      linear-gradient(315deg, transparent 50%, var(--hui-divider-core-color) 50%, var(--hui-divider-core-color) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(50% + 3px), var(--hui-divider-arrow-color) calc(50% + 3px)) ~"calc(50% + (var(--hui-divider-arrow-size) / 2)) calc(50% + (var(--hui-divider-arrow-size) / 2)) / var(--hui-divider-arrow-size) var(--hui-divider-arrow-size)" no-repeat;
    @fragment-value-background-divider-horizontal-arrow-up:
      linear-gradient(135deg, transparent 50%, var(--hui-divider-core-color) 50%, var(--hui-divider-core-color) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(50% + 3px), var(--hui-divider-arrow-color) calc(50% + 3px)) ~"calc(50% - (var(--hui-divider-arrow-size) / 2)) calc(50% - (var(--hui-divider-arrow-size) / 2)) / var(--hui-divider-arrow-size) var(--hui-divider-arrow-size)" no-repeat,
      linear-gradient(225deg, transparent 50%, var(--hui-divider-core-color) 50%, var(--hui-divider-core-color) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(50% + 3px), var(--hui-divider-arrow-color) calc(50% + 3px)) ~"calc(50% + (var(--hui-divider-arrow-size) / 2)) calc(50% - (var(--hui-divider-arrow-size) / 2)) / var(--hui-divider-arrow-size) var(--hui-divider-arrow-size)" no-repeat;
    @fragment-value-background-divider-horizontal-edges:
      linear-gradient(135deg, transparent calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% + (var(--hui-divider-edge-thickness) / 2)), transparent calc(50% + (var(--hui-divider-edge-thickness) / 2))) ~"var(--hui-divider-edge-padding) calc(50% - (var(--hui-divider-edge-length) / 2)) / var(--hui-divider-edge-length) var(--hui-divider-edge-length)" no-repeat,
      linear-gradient(45deg, transparent calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% + (var(--hui-divider-edge-thickness) / 2)), transparent calc(50% + (var(--hui-divider-edge-thickness) / 2))) ~"var(--hui-divider-edge-padding) calc(50% + (var(--hui-divider-edge-length) / 2)) / var(--hui-divider-edge-length) var(--hui-divider-edge-length)" no-repeat,
      linear-gradient(225deg, transparent calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% + (var(--hui-divider-edge-thickness) / 2)), transparent calc(50% + (var(--hui-divider-edge-thickness) / 2))) ~"calc(100% - var(--hui-divider-edge-padding)) calc(50% - (var(--hui-divider-edge-length) / 2)) / var(--hui-divider-edge-length) var(--hui-divider-edge-length)" no-repeat,
      linear-gradient(315deg, transparent calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% - (var(--hui-divider-edge-thickness) / 2)), var(--hui-divider-edge-color) calc(50% + (var(--hui-divider-edge-thickness) / 2)), transparent calc(50% + (var(--hui-divider-edge-thickness) / 2))) ~"calc(100% - var(--hui-divider-edge-padding)) calc(50% + (var(--hui-divider-edge-length) / 2)) / var(--hui-divider-edge-length) var(--hui-divider-edge-length)" no-repeat;
    @fragment-value-background-divider-horizontal-endpoint-left:
      linear-gradient(135deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"calc(var(--hui-divider-endpoint-padding) - (var(--hui-divider-endpoint-size) / 2)) calc(50% - (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat,
      linear-gradient(45deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"calc(var(--hui-divider-endpoint-padding) - (var(--hui-divider-endpoint-size) / 2)) calc(50% + (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat,
      linear-gradient(225deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"var(--hui-divider-endpoint-padding) calc(50% - (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat,
      linear-gradient(315deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"var(--hui-divider-endpoint-padding) calc(50% + (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat;
    @fragment-value-background-divider-horizontal-endpoint-right:
      linear-gradient(135deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"calc(100% - var(--hui-divider-endpoint-padding)) calc(50% - (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat,
      linear-gradient(45deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"calc(100% - var(--hui-divider-endpoint-padding)) calc(50% + (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat,
      linear-gradient(225deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"calc(100% - (var(--hui-divider-endpoint-padding) - (var(--hui-divider-endpoint-size) / 2))) calc(50% - (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat,
      linear-gradient(315deg, transparent 50%, var(--hui-divider-core-color) 50%) ~"calc(100% - (var(--hui-divider-endpoint-padding) - (var(--hui-divider-endpoint-size) / 2))) calc(50% + (var(--hui-divider-endpoint-size) / 4)) / calc(var(--hui-divider-endpoint-size) / 2) calc(var(--hui-divider-endpoint-size) / 2)" no-repeat;
    @fragment-value-background-divider-horizontal-diamond:
      @fragment-value-background-divider-horizontal-arrow-up,
      @fragment-value-background-divider-horizontal-arrow-down;
    @fragment-value-background-divider-horizontal-endpoints:
      @fragment-value-background-divider-horizontal-endpoint-left,
      @fragment-value-background-divider-horizontal-endpoint-right;
       
    border: none;
    margin: 0 auto;
    height: 40px;
    background:
      @fragment-value-background-divider-horizontal-edges,
      @fragment-value-background-divider-horizontal-endpoints,
      @fragment-value-background-divider-horizontal-line;
    
    &.arrow-down {
      background:
        @fragment-value-background-divider-horizontal-arrow-down,
        @fragment-value-background-divider-horizontal-edges,
        @fragment-value-background-divider-horizontal-endpoints,
        @fragment-value-background-divider-horizontal-line-open;
    }
    
    &.arrow-up {
      background:
        @fragment-value-background-divider-horizontal-arrow-up,
        @fragment-value-background-divider-horizontal-edges,
        @fragment-value-background-divider-horizontal-endpoints,
        @fragment-value-background-divider-horizontal-line-open;
    }

    &.diamond {
      background:
        @fragment-value-background-divider-horizontal-diamond,
        @fragment-value-background-divider-horizontal-edges,
        @fragment-value-background-divider-horizontal-endpoints,
        @fragment-value-background-divider-horizontal-line-open;
    }
    
    &.water {
      --hui-divider-arrow-color: hsl(223, 40%, 44%);
    }
    
    &.fire {
      --hui-divider-arrow-color: hsl(353, 44%, 38%);
    }
    
    &.wind {
      --hui-divider-arrow-color: hsl(182, 42%, 49%);
    }

    &.earth {
      --hui-divider-arrow-color: hsl(152, 26%, 28%);
    }

    &.lightning {
      --hui-divider-arrow-color: hsl(64, 63%, 79%);
    }

    &.void {
      --hui-divider-arrow-color: hsl(257, 40%, 38%);
    }
  }
  
  figure& {
     @fragment-value-background-frame-borders:
      linear-gradient(90deg, var(--hui-frame-color) calc(50% - 20px), transparent calc(50% - 20px), transparent calc(50% + 20px), var(--hui-frame-color) calc(50% + 20px)) ~"center var(--hui-frame-padding) / calc(100% - ((var(--hui-frame-padding) + var(--hui-corner-depth)) * 2)) var(--hui-frame-thickness)" no-repeat,
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(100% - var(--hui-frame-padding)) center / var(--hui-frame-thickness) calc(100% - ((var(--hui-frame-padding) + var(--hui-corner-depth)) * 2))" no-repeat,
      linear-gradient(90deg, var(--hui-frame-color) calc(50% - 20px), transparent calc(50% - 20px), transparent calc(50% + 20px), var(--hui-frame-color) calc(50% + 20px)) ~"center calc(100% - var(--hui-frame-padding)) / calc(100% - ((var(--hui-frame-padding) + var(--hui-corner-depth)) * 2)) var(--hui-frame-thickness)" no-repeat,
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"var(--hui-frame-padding) center / var(--hui-frame-thickness) calc(100% - ((var(--hui-frame-padding) + var(--hui-corner-depth)) * 2))" no-repeat;
    @fragment-value-background-frame-corner-inset-ne:
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness)) var(--hui-frame-padding) / var(--hui-frame-thickness) var(--hui-corner-depth)" no-repeat,
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"var(--hui-frame-padding) calc(var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness)) / calc(var(--hui-corner-depth) - var(--hui-frame-thickness)) var(--hui-frame-thickness)" no-repeat;
    @fragment-value-background-frame-corner-inset-nw:
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(100% - (var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness))) var(--hui-frame-padding) / var(--hui-frame-thickness) var(--hui-corner-depth)" no-repeat,
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(100% - var(--hui-frame-padding)) calc(var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness)) / calc(var(--hui-corner-depth) - var(--hui-frame-thickness)) var(--hui-frame-thickness)" no-repeat;
    @fragment-value-background-frame-corner-inset-sw:
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(100% - (var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness))) calc(100% - var(--hui-frame-padding)) / var(--hui-frame-thickness) var(--hui-corner-depth)" no-repeat,
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(100% - var(--hui-frame-padding)) calc(100% - (var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness))) / calc(var(--hui-corner-depth) - var(--hui-frame-thickness)) var(--hui-frame-thickness)" no-repeat;
    @fragment-value-background-frame-corner-inset-se:
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"calc(var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness)) calc(100% - var(--hui-frame-padding)) / var(--hui-frame-thickness) var(--hui-corner-depth)" no-repeat,
      linear-gradient(0deg, var(--hui-frame-color), var(--hui-frame-color)) ~"var(--hui-frame-padding) calc(100% - (var(--hui-frame-padding) + var(--hui-corner-depth) - var(--hui-frame-thickness))) / calc(var(--hui-corner-depth) - var(--hui-frame-thickness)) var(--hui-frame-thickness)" no-repeat;
    @fragment-value-background-frame-decoration-n:
      linear-gradient(45deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% - 13px) var(--hui-frame-padding) / 14px 14px" no-repeat,
      linear-gradient(135deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50%) calc(var(--hui-frame-padding) - 1px) / 16px 16px" no-repeat,
      linear-gradient(225deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% + 3px) calc(var(--hui-frame-padding) - 9px) / 9px 9px" no-repeat,
      linear-gradient(315deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% + 13px) var(--hui-frame-padding) / 14px 14px" no-repeat,
      linear-gradient(225deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50%) calc(var(--hui-frame-padding) - 1px) / 16px 16px" no-repeat,
      linear-gradient(135deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% - 3px) calc(var(--hui-frame-padding) - 9px) / 9px 9px" no-repeat;
    @fragment-value-background-frame-decoration-s:
      linear-gradient(225deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% + 13px) calc(100% - var(--hui-frame-padding)) / 14px 14px" no-repeat,
      linear-gradient(315deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50%) calc(100% - (var(--hui-frame-padding) - 1px)) / 16px 16px" no-repeat,
      linear-gradient(45deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% - 3px) calc(100% - (var(--hui-frame-padding) - 9px)) / 9px 9px" no-repeat,
      linear-gradient(135deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% - 13px) calc(100% - var(--hui-frame-padding)) / 14px 14px" no-repeat,
      linear-gradient(45deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50%) calc(100% - (var(--hui-frame-padding) - 1px)) / 16px 16px" no-repeat,
      linear-gradient(315deg, transparent calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% - ((var(--hui-frame-thickness) + 1px) / 2)), var(--hui-frame-color) calc(50% + ((var(--hui-frame-thickness) - 1px) / 2)), transparent calc(50% + ((var(--hui-frame-thickness) - 1px) / 2))) ~"calc(50% + 3px) calc(100% - (var(--hui-frame-padding) - 9px)) / 9px 9px" no-repeat;
    @fragment-value-background-frame-corners-inset:
      @fragment-value-background-frame-corner-inset-ne,
      @fragment-value-background-frame-corner-inset-nw,
      @fragment-value-background-frame-corner-inset-sw,
      @fragment-value-background-frame-corner-inset-se;
    @fragment-value-background-frame-decorations:
      @fragment-value-background-frame-decoration-n,
      @fragment-value-background-frame-decoration-s;

    position: relative;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.5);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.25;
      background:
        @fragment-value-background-frame-decorations,
        @fragment-value-background-frame-corners-inset,
        @fragment-value-background-frame-borders;      
    }
    
    figcaption {
      font-size: 0.8em;
      position: absolute;
      left: calc(var(--hui-frame-padding) + var(--hui-frame-thickness) + var(--hui-corner-depth));
      right: calc(var(--hui-frame-padding) + var(--hui-frame-thickness) + var(--hui-corner-depth));
      bottom: calc(2% + var(--hui-frame-padding) + var(--hui-frame-thickness) + var(--hui-corner-depth));
      background-image: radial-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 20%, transparent 100%);
      padding: 0.5em;
      text-align: center;
      text-shadow: 0 0 10px black;
    }
  }
}

/*
Radial inset corners:
radial-gradient(circle at top left, transparent 17px, var(--hui-frame-color) 18px, var(--hui-frame-color) 20px, transparent 21px) ~"top left / 20px 20px" no-repeat,
radial-gradient(circle at top right, transparent 17px, var(--hui-frame-color) 18px, var(--hui-frame-color) 20px, transparent 21px) ~"top right / 20px 20px" no-repeat,
radial-gradient(circle at bottom right, transparent 17px, var(--hui-frame-color) 18px, var(--hui-frame-color) 20px, transparent 21px) ~"bottom right / 20px 20px" no-repeat,
radial-gradient(circle at bottom left, transparent 17px, var(--hui-frame-color) 18px, var(--hui-frame-color) 20px, transparent 21px) ~"bottom left / 20px 20px" no-repeat
*/

              
            
!

JS

              
                function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

function registerControllersContentBox() {
  let container     = document.getElementById('content-boxes');
  let widthControl  = document.getElementById('content-box-width');
  let widthFeedback = document.querySelector('#content-box-width + .value');
  
  widthControl.addEventListener('change', function() {
    let propValue = widthControl.value + "%";
    
    container.style.setProperty('--showcase-content-box-width', propValue);
    
    widthFeedback.innerHTML = propValue;
  });
}

function registerControllersDividers() {
  let container = document.getElementById('dividers');

  let widthControl  = document.getElementById('control-divider-width');
  let widthFeedback = document.querySelector('#control-divider-width + .value');

  widthControl.addEventListener('change', function() {
    let propValue = widthControl.value + "%";
    
    container.style.setProperty('--showcase-divider-width', propValue);
    
    widthFeedback.innerHTML = propValue;
  });
  
  let dividerElement = document.querySelector('#dividers hr.hui');
  let styleControl   = document.getElementById('control-divider-style');
  let colorControl   = document.getElementById('control-divider-color');

  styleControl.addEventListener('change', function() {
    let propValue = styleControl.value;

    dividerElement.classList.remove('arrow-down', 'arrow-up', 'diamond');
    
    if (propValue !== 'default') {
      dividerElement.classList.add(propValue);
    }
  });

  colorControl.addEventListener('change', function() {
    let propValue = colorControl.value;

    dividerElement.classList.remove('water', 'fire', 'wind', 'earth', 'lightning', 'void');
    
    if (propValue !== 'default') {
      dividerElement.classList.add(propValue);
    }
  });
}

function registerControllers() { 
  registerControllersContentBox();
  registerControllersDividers();
}

ready(function() {
  registerControllers();
});
              
            
!
999px

Console