After exploring different options, I have decided to switch from my previous Bootstrap framework to using a solid SVG strip with D3 for my project.
The objective is to create 3 clickable triangles that will mask images and act as anchor links within the shapes. Although I also plan to incorporate a hover effect transitioning the triangles into circles, this feature is not a current priority.
Despite my efforts, I am facing challenges in un-rotating the images within the triangles and setting a single background image instead of the current covered layout. Attempts with CSS background-image did not yield the desired outcome.
Below you can find a snippet of my d3.js code along with a complete example on jsfiddle.
var svg = d3.select(".mydiv").append("svg").attr("width", width).attr("height", height);
var defs= svg.append('defs')
defs.append('pattern')
.attr('id', 'pic1')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 100)
.attr('height', 100)
.append('svg:image')
.attr('xlink:href', 'http://placehold.it/1749x1510')
.attr("width", 100)
.attr("height", 100)
.attr("x", 0)
.attr("y", -10);
svg.append("a")
.attr("xlink:href", "http://www.google.com")
.append('path')
.attr("overflow","hidden")
.attr("d", d3.svg.symbol().type("triangle-up").size(10000))
.attr("transform", function(d) { return "translate(" + 300 + "," + 200 + ") rotate(0)"; })
.attr("fill", "url(#pic1)");
http://jsfiddle.net/5Ldzk5w6/2/
If anyone could spare some time or offer assistance in resolving these issues with the images, it would be greatly appreciated!