Knockout tournament bracket

A fairly simple CSS3 solution for tournament brackets

by mzilverberg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<ol class="c-knockout">
  <li class="c-knockout__round c-knockout__round--1/8">
    <ol class="c-knockout__matches">
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span class="c-team c-team--away">&nbsp;</span>
      </li>
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span class="c-team c-team--away">&nbsp;</span>
      </li>
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span class="c-team c-team--away">&nbsp;</span>
      </li>
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span class="c-team c-team--away">&nbsp;</span>
      </li>
      <li class="c-knockout__match">
				<span class="c-team c-team--home">&nbsp;</span>
				<span class="c-team c-team--away">&nbsp;</span>
			</li>
			<li class="c-knockout__match">
				<span class="c-team c-team--home">&nbsp;</span>
				<span class="c-team c-team--away">&nbsp;</span>
			</li>
			<li class="c-knockout__match">
				<span class="c-team c-team--home">&nbsp;</span>
				<span class="c-team c-team--away">&nbsp;</span>
			</li>
			<li class="c-knockout__match">
				<span class="c-team c-team--home">&nbsp;</span>
				<span class="c-team c-team--away">&nbsp;</span>
			</li>
    </ol>
  </li>
  <li class="c-knockout__round c-knockout__round--1/4">
    <ol class="c-knockout__matches">
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span class="c-team c-team--away">&nbsp;</span>
      </li>
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span class="c-team c-team--away">&nbsp;</span>
      </li>
      <li class="c-knockout__match">
        <span class="c-team c-team--home">&nbsp;</span>
        <span...

SCSS

$column-margin: 60px;
$bracket-color: lightgrey;
$bracket-radius: 10px;
$bracket-line-width: 1px;
$team-height: 36px;
$team-margin: 4px;

.c-knockout {
  display: flex;
	margin-left: -$column-margin;
  padding-left: 0;
  overflow: hidden; // prevent overflow of bracket lines
	
	&__round {
    display: block;
		width: 25%;
    padding-left: $column-margin;
		
		&--1\/8 {  }
		&--1\/4 {  }
		&--1\/2 {  }
		&--final {  }
	}
  
  &__matches,
  &__match {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  &__matches {
    justify-content: space-around;
    height: 100%;
    padding-left: 0; 
  }
  
  &__match {
    width: 100%;
		margin: $team-height / 2 0 0;
		padding-left: 0;

    &:before,
    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      top: calc(50% - #{$bracket-line-width});
      width: $column-margin / 2;
      border: solid $bracket-color;
    }

    &:before {
      left: -$column-margin / 2;
      border-width: $bracket-line-width 0 0;
    }

    &:after {
      height: 2000%;
      border-width: $bracket-line-width $bracket-line-width 0 0;
      left: 100%;
    }

    &:last-child {
      &:after {
        border-right-color: #fff; 
      }
    }
  }
}

.c-team {
	display: block;
	width: 100%;
	height: $team-height;
	background: $bracket-color;
	margin-bottom: $team-margin;
	
	&--away {
		margin-bottom: 0;
	}
}