I'm trying to make buttons that look like a small cake
How do I insert the top of the cake?
example:
http://oi63.tinypic.com/4tx5xj.jpg
ul#menutop {
padding: 0;
margin: 50px 20px 20px 10px;
}
ul#menutop li {
display: inline;
}
ul#menutop li a {
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
font-size:25px;
background-color: blue;
}
ul#menutop li a:hover {
background-color: orange;
}
<ul id="menutop">
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
If you don't want to create additional markup, you could always use pseudo-elements.
DEMO
YOUR CODE
ul#menutop {
padding: 0;
margin: 50px 20px 20px 10px;
}
ul#menutop li {
display: inline;
}
ul#menutop li a {
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
font-size:25px;
background-color: blue;
position: relative;
}
ul#menutop li a:hover {
background-color: orange;
}
ul#menutop li a:after {
background: red;
border-radius: 5px 5px 0 0 / 5px 5px 0 0;
content: '';
height: 20px;
width: 75%;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
}
<ul id="menutop">
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With