Ext.ux.grid.FlagMark CSS

// this just makes sure the background is transparent when the row is selected so you can still see the rows highlight colour through it
.x-grid-row-selected .x-grid-cell .ux-grid-flag { background-color : transparent !important; }

// this will position the flag top right of the container
.ux-grid-flag {
    position: absolute;
    right: 0;
    padding: 0;
    border-width : 0 !important;
    background-color: transparent  !important;
}

// this...
.ux-grid-flag .x-grid-cell-inner {
    height: 60px;
    width: 60px;
}
// ...and this will make a CSS triangle for you
.ux-grid-flag .x-grid-cell-inner .ux-flag-cell-triangle {
    border-style: solid;
    border-width: 0 60px 60px 0;
    position: initial;
    display: block;
}

// this sets up the colour given to each possible state in the component. you can define your own based on the flag attributes you want
.ux-grid-flag .x-grid-cell-inner .ux-row-flag-item.favourite .ux-flag-cell-triangle { border-color: transparent #e13f8f transparent transparent;}
.ux-grid-flag .x-grid-cell-inner .ux-row-flag-item.flag .ux-flag-cell-triangle { border-color: transparent #e13f8f transparent transparent;}

// this positions the glyph in the triangle
.ux-grid-flag .x-grid-cell-inner i {
    position: absolute;
    right: 0;
    color: #fff;
    font-size: 16px;
}

// bear in mind we have our own glyph font. you'll need to get your own from somewhere like icomoon
.ux-grid-flag .x-grid-cell-inner i[data-icon]:before {
    padding: 0;
    margin: 10px;
}