ну объясни мне на примере тогда.

Изображение

------
71076_controller__hover.png (21.6 Kb)
Скачиваний: 86

.controller{border:0;margin-bottom:0}

 .controller td{height:128px;vertical-align:middle;padding:0;border-right:0;border-left:0}

 .controller__heal #heal{margin:0 auto;width:64px;height:64px;display:block;background:#171512 url("/images/background/icon-heal.png") no-repeat center;background-size:cover}

 .controller__heal #heal:hover{background:#171512 url("/images/background/icon-heal__hover.png") no-repeat center}

 .controller__cursor nav.cursor{background:#171512 url("images/controller.png") no-repeat center;background-size:cover;position:relative;padding:0;margin:0 auto;width:128px;height:128px;border-radius:50%;list-style:none;overflow:hidden}

 .controller__cursor nav.cursor:hover{background:#171512 url("/images/controller__hover.png") no-repeat center}

 .controller__cursor nav.cursor .sector{overflow:hidden;position:absolute;top:0;right:0;width:50%;height:50%;transform-origin:0% 100%}

 .controller__cursor nav.cursor .sector:first-child{transform:rotate(316deg) skewY(0deg)}

 .controller__cursor nav.cursor .sector:nth-child(2){transform:rotate(46deg) skewY(0deg)}

 .controller__cursor nav.cursor .sector:nth-child(3){transform:rotate(135deg) skewY(0deg)}

 .controller__cursor nav.cursor .sector:nth-child(4){transform:rotate(226deg) skewY(0deg)}

 .controller__cursor nav.cursor .sector-contents{overflow:hidden;position:absolute;left:-100%;width:200%;height:200%;border-radius:50%;border:1px dashed}

 .controller__magic a{margin:0 auto;width:64px;height:64px;display:block;background:#171512 url("/images/background/icon-magic.png") no-repeat center;background-size:cover}

 .controller__magic a:hover{background:#171512 url("/images/background/icon-magic__hover.png") no-repeat center}

как это реализовать в html?

ой ржу ни могу!

Где стили взяты, там и разметка.

Судя по скрину, открыт просмотр кода элемента, так ведь там и видна разметка, даже один из элементов джойстика выделен.