<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row pd-top"> <!--normal --> <div class="col-lg-3"> <h6>Normal</h6> <ul class="location"> <li><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--radius-4 --> <div class="col-lg-3"> <h6>Radius-4 </h6> <ul class="location"> <li class="radius-4px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="radius-4px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="radius-4px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="radius-4px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="radius-4px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--radius-40 --> <div class="col-lg-3"> <h6>radius-40</h6> <ul class="location"> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--radius-40 normal --> <div class="col-lg-3"> <h6>radius-40 & Normal</h6> <ul class="location"> <li class="radius-40px"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="curve "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="curve "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="radius-40px "><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--curve --> <div class="col-lg-3"> <h6>Curve</h6> <ul class="location"> <li class="curve"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="curve"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="curve"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="curve"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="curve"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--curveLeft --> <div class="col-lg-3"> <h6>Curve Left</h6> <ul class="location"> <li class="curveLeft"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="curveLeft"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="curveLeft"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="curveLeft"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="curveLeft"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--curveRight --> <div class="col-lg-3"> <h6>Curve Right</h6> <ul class="location"> <li class="curveRight"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="curveRight"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="curveRight"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="curveRight"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="curveRight"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> <!--rotate --> <div class="col-lg-3"> <h6>Rotate</h6> <ul class="location"> <li class="rotate"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Home</a> </li> <li class="rotate"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">About</a> </li> <li class="rotate"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Services</a> </li> <li class="rotate"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Gallery</a> </li> <li class="rotate"><img src="https://www.webcaty.com/link.gif" alt=""> <a href="#">Contact</a> </li> </ul> </div> </div> </div>

body{ background-color: #131a36; margin: 0; padding: 0; } h6 { color: #fff; } .pd-top{ padding-top: 60px!important; } .location { margin-left: 0px; padding-left: 0px; } .location li { padding: 10px 1px 6px 9px!important; margin-bottom: 2px; list-style: none; background: linear-gradient(to left, rgb(255, 87, 34), #ff5722, #ff5722); } .location li img { width: 20px; } /*normal*/ .location li a { color: #ffffff; font-size: 15px; padding-left: 5px; } /*radius-4*/ .radius-4px { border-radius: 5px; } /*radius-40*/ .radius-40px{ border-radius: 40px; } /*curve*/ .curve { border-bottom-right-radius: 15px; border-top-left-radius: 15px; } /*curveLeft*/ .curveLeft { border-bottom-left-radius: 20px; border-top-left-radius: 20px; } /*curveRight*/ .curveRight { border-bottom-right-radius: 20px; border-top-right-radius: 20px; } /*rotate*/ .rotate{ transform: skew(-21deg); } .location li:hover a { text-decoration: none; color: #dcd9d9 }