div.example1 {
    filter: chroma(color=cyan);
    position: relative;
    left: 4em;
    width: 10em;
    border-width: 20px;
    border-style: solid;
    border-left-color:   #f00;
    border-right-color:  #f00;
    border-top-color:    #00f;
    border-bottom-color: #00f;
}

div.example2 {
    filter: chroma(color=cyan);
    position: relative;
    width: 10em;
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #f00;
}
div.example3 {
    position: relative;
    left: 4em;
    width: 0px;
    height: 0px;
    font-size: 0;
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #f00;
}

/* een nieuw alternatief: */
div.trap {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0px;
    width: 100px;
}
div.backpane {
    position: relative;
    font-size: 0;
    cursor:hand;
}
/* einde: een nieuw alternatief: */

div.rb{
    position: relative;
    left: 4em;
    width: 0px;
    height: 0px;
    font-size: 0;
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: transparent;
    border-right-width: 80px;
    border-right-style: solid;
    border-right-color: #f00;
    cursor:hand;
}
div.lo{
    position: relative;
    left: 4em;
    width: 0px;
    height: 0px;
    font-size: 0;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-left-width: 80px;
    border-left-style: solid;
    border-left-color: #f00;
    cursor:hand;
}
div.lb{
    position: relative;
    left: 4em;
    width: 0px;
    height: 0px;
    font-size: 0;
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 80px;
    border-left-style: solid;
    border-left-color: #f00;
    cursor:hand;
}
div.ro{
    position: relative;
    left: 4em;
    width: 0px;
    height: 0px;
    font-size: 0;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-right-width: 80px;
    border-right-style: solid;
    border-right-color: #f00;
    cursor:hand;
}

div.sqr {
    left: 4em;
    width: 50px;
    height: 50px;
    font-size: 0;
    background-color: #d0f0f0;
    border-width: 3px;
    border-color: #000000;
    border-bottom-width: 3px;
    border-bottom-color: #000000;
    border-top-width:  3px;
    border-top-color: #000000;
    border-left-width: 3px;
    border-left-color: #000000;
    border-right-width: 3px;
    border-right-color: #000000;
    cursor:hand;
}

div.dot {
    left: 4em;
    width: 20px;
    height: 20px;
    font-size: 0;
    background-color: #d0f0f0;
    border-width: 3px;
    border-color: #000000;
    border-bottom-width: 3px;
    border-bottom-color: #000000;
    border-top-width:  3px;
    border-top-color: #000000;
    border-left-width: 3px;
    border-left-color: #000000;
    border-right-width: 3px;
    border-right-color: #000000;
    cursor:hand;
}


P {
    font-family: Arial;
    font-size:  14px;
    margin:     0px;
}