JSFiddle - React, Tailwind, and code Playground

by jfroom

HTML

<div class='wrap'>
  <svg class='art'>
    <line x1="75%" y1="25%" x2="25%" y2="75%" />
    <line x1="75%" y1="75%" x2="25%" y2="25%" />
  </svg>
</div>

<div class='wrap' style='width: 200px; height: 100px;'>
  <svg class='art'>
    <line x1="75%" y1="25%" x2="25%" y2="75%" />
    <line x1="75%" y1="75%" x2="25%" y2="25%" />
  </svg>
</div>

CSS

.wrap {
  border: 1px solid cyan;
  width: 200px;
//  height: 200px;
  vertical-align: middle;
  text-align: middle;
  position: relative;
}
.wrap:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.art {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  stroke: #999;
  stroke-width: 10px;
  stroke-linecap: round;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  //height: 0;
  //padding-bottom: 100%;
}