HTML + JS (ES6), 34 + 306 = 340 bytes

Makes use of a 30 degree horizontal skew - in the 3rd argument of the matrix transform, the tangent of 30° is represented as pow(3,-.5).

There are quite a few ugly magic numbers, and it doesn't quite match the proportions of the Wikipedia image. I'm certain there is a more "mathematical" way to go about this; any help would be appreciated.

f= _=>{with(Math)with(C=c.getContext`2d`)for(l=lineTo.bind(C),lineWidth=.01,transform(50,0,0,50,200,224),N=4;N--;rotate(PI*2/3))beginPath(fill(save(fillStyle=N?N>1?'#fff':'#000':'#777'))),transform(-1,0,-pow(3,-.5),-1,3.965,1.71),l(0,0),l(0,6),l(1,6),l(1,1),l(4.616,1),l(5.772,0),closePath(restore(stroke()))} f()

<canvas id=c width=400 height=400>

HTML + JS (ES6), 34 + 306 = 340 bytes

Makes use of a 30 degree horizontal skew - in the 3rd argument of the matrix transform, the tangent of 30° is represented as pow(3,-.5).

There are quite a few ugly magic numbers, and it doesn't quite match the proportions of the Wikipedia image. I'm certain there is a more "mathematical" way to go about this; any help would be appreciated.

See the ungolfed version on CodePen.

f= _=>{with(Math)with(C=c.getContext`2d`)for(l=lineTo.bind(C),lineWidth=.01,transform(50,0,0,50,200,224),N=4;N--;rotate(PI*2/3))beginPath(fill(save(fillStyle=N?N>1?'#fff':'#000':'#777'))),transform(-1,0,-pow(3,-.5),-1,3.965,1.71),l(0,0),l(0,6),l(1,6),l(1,1),l(4.616,1),l(5.772,0),closePath(restore(stroke()))} f()

<canvas id=c width=400 height=400>