Diagonal Corner Using CSS

This is like the tag on the fixture panel denoting home and away. Key is border-width: 40px 40px 0 0; which removes the bottom and left corners, resulting in the top and right "filling in".

<style>
.wrapper{
    padding: 15px;
    height: 240px;
    width:190px;
    background-color: #f5f5fa;
    overflow: hidden;
    position:relative;
    border-radius: 3px;
}
.stadium-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 0;
    z-index: 0;
    border-color: #000a3c #f5f5fa;
    color: #fff;
}
.stadium-tag span{
    text-align: center;
    left: 6px;
    top: -36px;
    position: relative;
    margin: 0;
    z-index: 99;
    font-size: .8em;
    font-weight: 500;
}
</style>

<div class="wrapper">
	<div class="stadium-tag">
		<span>A</span>
	</div>
</div>

Also:

.corner{
    margin-top:20px;
    width:0;
    height:0;
    border-width:50px;
    border-style: solid;
}
.corners1{
    border-color:  #000a3c transparent  transparent  transparent;
}
.corners2{
    border-color: transparent #000a3c transparent  transparent;
}

.corners3{
    border-color: transparent transparent #000a3c transparent  ;
}

.corners4{
    border-color:  transparent  transparent transparent #000a3c;
}
.corners5{
    border-width:50px 50px 0 0;
    border-color:  #000a3c #fff;
}
.corners6{
    border-width:0 50px 50px 0;
    border-color:  #000a3c #fff;
}
.corners7{
    border-width:0 0 50px 50px;
    border-color: #000a3c #fff;
}
.corners8{
    border-width: 50px 0 0 50px;
    border-color: #000a3c #fff;
}

<div class="corners corners1"></div>
<div class="corners corners2"></div>
<div class="corners corners3"></div>
<div class="corners corners4"></div>
<div class="corners corners5"></div>
<div class="corners corners6"></div>
<div class="corners corners7"></div>
<div class="corners corners8"></div