Both approaches serve the same purpose: You can write code, that uses some features, which are not yet implemented in your target environment. They do this, however, by using different techniques.
A polyfill will try to emulate certain APIs, so can use them as if they were already implemented.
A transpiler on the other hand will transform your code and replace the respective code section by other code, which can already be executed.
Typically you use a polyfill, if your target browser did not yet implement the latest bleeding edge feature (read browser APIs) you want to use.
A transpiler on the other hand will let you use language features, the target environment does not support yet, e.g. some ES6 features like fat arrow functions.