Tizen Developers

You may try this, 

<div class="main-container" >
    <div id="container-top" class="container-top">
        <div id="container-top-title" class="title" style=" position: initial; "></div>
    	<img id="container-top-image" class="image"/>
    </div>
    <div id="container-left" class="container-left">
    	 <div id="inner">
	    	 <div id="container-left-title" class="title" style=" transform: rotate(-90deg); text-align: left; position: fixed; margin-left: -34px;"></div>
	    	 <img id="container-left-image" class="image" style="text-align: right; position: fixed; margin-left: 17px;"/>
    	 </div>
    </div>
     <div id="container-right" class="container-right">
      <div id="inner">
    	  <img id="container-right-image" class="image" style=" text-align: left; position: fixed; margin-left: -21px;"/>
    	  <div id="container-right-title" class="title" style=" transform: rotate(90deg); text-align: right; position: fixed; margin-left: 30px;"></div>
    	</div>
    </div>
    <div id="container-bottom" class="container-bottom">
    	<img id="container-bottom-image" class="image"/>
    	<div id="container-bottom-title" class="title"></div>
    </div>
  </div>

CSS

body {
    margin: 0;
}

.main-container {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
}

.container-top {
    top: 21px;
    left: 130px;
    position: absolute;
    height: 132px;
    width: 100px;
}

.container-left {
    top: 130px;
    left: 21px;
    position: absolute;
    height: 132px;
    width: 150px;
}

.container-right {
    top: 130px;
    left: 239px;
    position: absolute;
    height: 132px;
    width: 150px;
}

.container-bottom {
    top: 219px;
    left: 130px;
    position: absolute;
    height: 132px;
    width: 100px;
}

.title {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    height: 32px;
    width: 100px;
    text-align: center;
}

.image {
    height: 100px;
    width: 100px;
}

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

#circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      color: #fcf2f2;
    }

I have actually modified this one from Tizen Studio AppShortcutsWidget sample app. You can modify like this as per your requirements. 

Please find the sample from from Tizen Studio > New > Web Sample > AppShortcutsWidget.