html - 切出圆形按钮

Question

我正在尝试创建一个带有按钮的菜单。
按钮具有透明背景，因此您可以看到后面的图像。
像这样:

• 注意按钮上的圆 Angular 。

Background-image

这是我做的:

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("http://i.stack.imgur.com/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>

这创造了我想要的效果，但圆 Angular 不存在。

我也尝试使用 clip: rect() 但这也产生了相同的结果，没有圆 Angular 。

Answer 1

找到了为按钮添加圆 Angular 的解决方案。

我做了什么:

1. 为
2. 内的 元素添加了大边框。
3. 向 元素添加了绝对位置。
4. 将 a 元素减去顶部和减去左边等于它的边框。
5. 结果:D

body {
  margin: 0;
}
.nav {
  width: 100vw;
}
.nav ul {
  position: relative;
  width: 200px;
  list-style: none;
  background-image: url("http://i.stack.imgur.com/NgUAO.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 400px;
  border: 2px solid red;
}
.nav ul li {
  position: absolute;
  line-height: 2em;
  text-align: center;
  box-sizing: border-box;
  border: 15px solid purple;
  margin: 0;
  width: 100%;
  height: 25%;
  overflow: hidden;
}
.nav ul li a {
  display: inline-block;
  top: -5px;
  left: -5px;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  border: 5px solid purple;
  background-color: transparent;
  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>