Menu name in hexagon shaped inline tag
Question
.hexagon span { color: #0f0f0f; font-size: 16px; line-height: 0px; } .hexagon { font-size: 40px; /*text-align: center;*/ line-height: 45px; } .hexagon, .hexagon:hover { color: #fff; text-decoration: none; } .hexagon.red, .hexagon.red:after, .hexagon.red:before { background: #ed8990; } .hexagon.aqua, .hexagon.aqua:after, .hexagon.aqua:before { background: #8dd7d8; } .hexagon.orange, .hexagon.orange:after, .hexagon.orange:before { background: #fd8a78; } .hexagon { width: 80px; height: 45px; position: relative; float: left; margin: 50px 25px; background: #48d1b2; border-radius: 4px; z-index: 1; text-align: center; box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.05), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.05); } .hexagon:before { content: ''; position: absolute; top: -22px; left: 16px; width: 48px; height: 48px; background: #b5adac; transform: rotate(-54deg) skewY(23deg); border-radius: 6px; z-index: -1; box-shadow: inset -1px 1px 0px 0px rgba(0, 0, 0, 0.05); } .hexagon:after { content: ''; position: absolute; bottom: -22px; left: 16px; width: 48px; height: 48px; background: #b5adac; transform: rotate(-54deg) skewY(23deg); border-radius: 6px; z-index: -1; box-shadow: inset 1px -1px 0px 0px rgba(0, 0, 0, 0.05); }
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="menu"> <a class="hexagon red"> <i class="fa fa-list"></i> <br/> <span>Some menu name</span> </a> <a class="hexagon aqua"> <i class="fa fa-file-o"></i> <br/> <span>Foo</span> </a> <a class="hexagon orange"> <i class="fa fa-cog"></i> <br/> <span>Barbazzzzz </span> </a> </div> </body> </html>
I have some hexagon shaped links. I try to add the name of the menu, but there are some problems.
There should be a bigger space between the hexagon's bottom and the name of the menu. margin-top wont help on the inline span .
If the name is too long, the spacing is too big between the lines. Even if I set it to line-height: 0px
2 answers
solution1
2 ACCPTED 2015-11-06 12:52:53
If I understand your problem you just need to make the name display: block .
So, you need to add something like:
.hexagon span {
display: block;
margin-top: 30px;
line-height: 20px;
}
http://jsbin.com/wojuhoravo/edit?html,css,output
Of course it would be nice to use div with proper class name instead of span in this case.
solution2
0 2015-11-06 13:05:22
just add this change that will be work for you
.hexagon span{ display: block; top: 25px; line-height: 20px; position: relative; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.