.wbqc-role {
  /* variables */
  --cos30: 0.866; /* cos(30°) = √3/2 ≈ 0.886, the height of an equilateral triangle with base 1 */
  --border-width: 2px;
  --border-style: solid;
}

.wbqc-role-subject,
.wbqc-role-predicate,
.wbqc-role-object {
  border-width: var(--border-width);
  border-top-style: var(--border-style);
  border-bottom-style: var(--border-style);
}

.wbqc-role-subject::after,
.wbqc-role-predicate::before,
.wbqc-role-predicate::after,
.wbqc-role-object::before {
  content: "";
  display: inline-block;
  width: calc(var(--cos30) * 1em);
  height: calc(var(--cos30) * 1em);
  transform: rotate(45deg);
  vertical-align: middle;
  border-width: var(--border-width);
  border-top-style: var(--border-style);
  border-right-style: var(--border-style);
}

.wbqc-role-subject {
  border-left-style: var(--border-style);
}

.wbqc-role-object {
  border-right-style: var(--border-style);
}