body {
    background-color: lightgrey;
    text-align: center;
    padding-top: 50px;
}

.triangulo {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    margin: 30px;
    opacity: 0.6;
    transition: 0.5s;
}

.triangulo:hover {
    opacity: 0;
}

.t1 {
    border-bottom: 100px solid blue;
    filter: drop-shadow(5px 5px 5px black);
}

.t2 {
    border-bottom: 100px solid red;
    filter: drop-shadow(2px 2px 2px black);
}

.t3 {
    border-bottom: 100px solid green;
    filter: drop-shadow(10px 10px 10px gray);
}

.t4 {
    border-bottom: 100px solid yellow;
    filter: drop-shadow(0px 0px 10px yellow);
}

.t5 {
    border-bottom: 100px solid purple;
    filter: drop-shadow(8px 2px 4px black);
}

.t6 {
    border-bottom: 100px solid orange;
    filter: drop-shadow(1px 8px 5px black);
}