Search code examples
htmlcsscss-shapes

rounded buttons cut out

I'm trying to create a menu with buttons.
The buttons have transparent background so you can see the image behind.
Like this:

enter image description here

  • Note the rounded corners on the buttons.

Background-image

Here is what i did: 

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}
<div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>

This created the effect i wanted, but the rounded corners are not present.

I also tried using the clip: rect() but this also created the same result, none rounded corners.

Solution

  • Pseudo Element

    If you add a pseudo element then you can create the effect that you like.

    It requires 3 very simple steps

    • Add pseudo ::before
    • Position to fit with parent border
    • Add border-radius bigger than parent

    body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border: 10px solid #660066;
  top: -10px;
  left: -10px;
  border-radius: 15px;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}
    <div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>

    Box Shadow

    This is also achievable using a pseudo element with a box-shadow.

    body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("https://i.sstatic.net/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 25%;
  position: absolute;
  border: 10px solid #660066;
  background: transparent;
  color: firebrick;
}
.nav ul li::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  border-radius: 10px;
  border: 2px solid #660066;
  box-shadow: 0 0 0px 10px #660066;
}
.nav ul li a {
  margin: 0;
}
.nav ul li:nth-of-type(1) {
  top: calc(25%);
}
.nav ul li:nth-of-type(2) {
  top: calc(50%);
}
.nav ul li:nth-of-type(3) {
  top: calc(75%);
}
    <div class="nav">
  <ul>
    <li><a href="#">Creating</a>
    </li>
    <li><a href="#">Custom</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Heres</a>
    </li>
  </ul>
</div>