Although not natively supported in every modern browser (IE) clip-path is pretty cool CSS tool to add to your belt. It allows you to simply slice a shape in the provided element, dictated by the values you pass. Clippy is an interactive web app that allows you to play around with points to create your own clip path. It even spits out the exact CSS to use that matches your clip path creation. It also has predefined paths on the right hand sidebar, commonly used shapes like a triangle, hexagon and even a star. A recent project I used this in is http://minicaso.com. On desktop, on the hero block I used clip path to cut the background-image off at an angle. As demonstrated here, clip-path is useful on elements with background-images.
Note: Clip-path slices the element based on the values you provide it. It simply doesn't care whats nested inside the element. I usually have a background image element that I apply the clip-path to then another element with he text content in layered on top of it. Thus, avoiding my text from being destroyed.
