Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="volume-estimator-output">
  <p class="text-center">You will love</p>
  <p id="volume-result" class="readonly-output">0</p>
  <p class="text-center">Litres</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

body {
  text-align: center;
  font-family: helvetica;
}

.volume-estimator-output {
  $size--crosshair: 35px;
  $borderWidth--crosshair: 1px;
  $grid-gutter-width: 20px;
  $color-ocean--btnPrimary: #004879;
  @mixin positioner($pos, $top: null, $right: null, $bottom: null, $left: null) {
  position: $pos;
  top: if($top, $top, auto);
  right: if($right, $right, auto);
  bottom: if($bottom, $bottom, auto);
  left: if($left, $left, auto);
}


  position: relative;
  margin-top: $grid-gutter-width;
  padding-top: $grid-gutter-width;
  padding-bottom: $grid-gutter-width;
  border: $borderWidth--crosshair solid $color-ocean--btnPrimary;
  width: 20%;

  &:before {
    content: "";
    display: block;
    @include positioner(
        absolute,
        -($borderWidth--crosshair),
        $size--crosshair,
        -($borderWidth--crosshair),
        $size--crosshair
    );
    border-top: $borderWidth--crosshair solid #fff;
    border-bottom: $borderWidth--crosshair solid #fff;
  }

  &:after {
    content: "";
    display: block;
    @include positioner(
        absolute,
        $size--crosshair,
        -($borderWidth--crosshair),
        $size--crosshair,
        -($borderWidth--crosshair)
    );
    border-left: $borderWidth--crosshair solid #fff;
    border-right: $borderWidth--crosshair solid #fff;
  }
}

.readonly-output {
  font-size: 3em;
  line-height: 1;
  font-weight: bold;
}
p {
  margin: 10px;
}

SassMeister-output.css

body {
  text-align: center;
  font-family: helvetica;
}

.volume-estimator-output {
  position: relative;
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border: 1px solid #004879;
  width: 20%;
}
.volume-estimator-output:before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  right: 35px;
  bottom: -1px;
  left: 35px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.volume-estimator-output:after {
  content: "";
  display: block;
  position: absolute;
  top: 35px;
  right: -1px;
  bottom: 35px;
  left: -1px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.readonly-output {
  font-size: 3em;
  line-height: 1;
  font-weight: bold;
}

p {
  margin: 10px;
}

SassMeister-rendered.html

<div class="volume-estimator-output">
  <p class="text-center">You will love</p>
  <p id="volume-result" class="readonly-output">0</p>
  <p class="text-center">Litres</p>
</div>