How to make the edges of the button like a Border-Radius, but triangular shape?

button {
Background-Color: # CAA777;
Border-Top: None;
Border-left: none;
Border RIGHT: 1PX Solid RGBA (0,0,0,0,5);
Border Bottom: 1px Solid RGBA (0,0,0,0,0,5);
Outline: none;
}
Button: Hover {
background-color: # cfac7c;
}
Button: Active {
Background-Color: # 967C66;
Border-TOP: 1px Solid RGBA (0,0,0,0,5);
Border-left: 1px Solid RGBA (0,0,0,0,5);
Border-Bottom: None;
Border-Right: none;
}

Answer 1, Authority 100%

Not quite understood the task, you need to make Border triangle or triangles ?
If one triangle , then this is like this (the button becomes a rectangular triangle, a good description is on this site http://htmlbook.ru/blog/treugolniki-cherez-css

button {
    Padding: 0;
    Background-Color: Transparent;
    Border: 10px Solid Transparent;
    Border-Bottom: 10px Solid # CAA777;
    Outline: none;
    }
    Button: Hover {
    Border Bottom: 10px Solid # CFAC7C;
    }
    Button: Active {
    Background-Color: Transparent;
    Border: 10px Solid Transparent;
    Border-Bottom: 10px Solid # 967C66;
   }

If triangles , then the Border-Image property is suitable, with which you can install your Border.

Answer 2

tried to do something similar, it may be suitable (carefully, crutches) 🙂

button {
    width: 100px;
    Padding: 0;
    Background-Color: # CAA777;
    Outline: none;
    Border: None;
    Position: Absolute;
    }
    Button :: Before,
    Button :: After {
     Content: '';
     Background-Color: Transparent;
     Border: 2px Solid Transparent;
     Border Right: 2px Solid # CAA777;
     Outline: none;
     Position: Absolute;
     Top: 0;
     Padding-TOP: 5.7px;
     Padding-Bottom: 5.7px;
    }
    Button :: After {
     Right: -4px;
     TRANSFORM: ROTATE (180DEG);
    }
    Button :: BEFORE {
     left: -4px;
    }
    Button: Hover {
     background-color: # cfac7c;
    }
    Button: Hover: Before
    Button: Hover: After {
     Border Right: 2px Solid # CFAC7C;
    }
    Button: Active {
     Background-Color: # 967C66;
    }
    Button: Active: Before
    Button: Active: Afterter {
     Border Right: 2px Solid # 967C66;
    }