圆形按钮剪出

Question

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

• 注意按钮上的圆角。

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>

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

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

Answer 1

找到了向按钮添加圆角的解决方案。

我做了什么：

1. 在＆lt; li＆gt; 中的＆lt; a＆gt; 元素中添加了一个大边框。
2. 为＆lt; a＆gt; 元素添加了绝对位置。
3. 将一个元素减去顶部，减去左边等于它的边界。
4. 结果：D
＆＃13;
＆＃13;
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%);
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

伪元素

如果你添加一个伪元素，那么你可以创建你喜欢的效果。

这需要3个非常简单的步骤

• 添加伪::before
• 适合父边框的位置
• 添加比父
更大的border-radius

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::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

使用带阴影的伪元素也可以实现这一点。

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::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>

Answer 3

我使用:before到li find fiddle demo

获得解决方案

我刚刚在您的代码中添加了这个css代码并且已经完成了。

.nav ul li:before {
    content:'';
    position:absolute;
    top:-5px;
    left:-5px;
    width:100%;
    height:100%;
    border:5px solid #660066;
    border-radius:10px;
    pointer-events:none;
}

Answer 4

亲爱的，您只使用了一个图像来尝试使用不同的图像。

＆＃13;

＆＃13;

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%);
}
.r{
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

＆＃13;

<div class="nav">
  <ul>
    <li class="r"><a href="#" >Creating</a>
    </li>
    <li class="r"><a href="#">Custom</a>
    </li>
    <li class="r"><a href="#">Menu</a>
    </li>
    <li class="r"><a href="#">Heres</a>
    </li >
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

由于您已经在使用:nth-child，因此将背景图片设置为a元素而不是ul并添加background-position偏移量要容易得多：< / p>

＆＃13;

＆＃13;

.nav {
    background-color: purple;
    width: 180px;
    padding: 1px 0;
}
.nav a {
    display: block;
    background-image: url(http://i.stack.imgur.com/NgUAO.png);
    text-align: center;
    border-radius: 10px;
    height: 70px;
    margin: 15px;
    line-height: 70px;
    font-size: 30px;
    font-family: sans-serif;
    text-decoration: none;
    color: lightblue;
}
.nav a:nth-child(2) {background-position: 0 -80px;}
.nav a:nth-child(3) {background-position: 0 -160px;}
.nav a:nth-child(4) {background-position: 0 -240px;}

＆＃13;

<div class="nav">
  <a href="#">Awesome</a>
  <a href="#">Custom</a>
  <a href="#">Menu</a>
  <a href="#">Here</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

每个人给你的答案是合乎逻辑的，如果你把按钮作为锚点而不是无序列表

所以也许你可以使用Ghost按钮。然后，您可以将网站背景与您的图像（不知道这是否是您的目标），或者您可以将图像添加到类似于您在此处尝试的按钮。

这是一个很好的例子（正如您将看到的那样，从codepen复制/粘贴，以免重新发明轮子，并且因为代码很好而且干净）：

<div class="wrap">
  <h1>Ghost Buttons with CSS3 <small>created by <a href="https://twitter.com/mithicher">
    @mithicher
  </a></small></h1>

  <h2>Buttons with Radius</h2>
  <a class="btn btn-medium btn-blue btn-radius" href="#">Download</a>
  <a class="btn btn-medium btn-green btn-radius" href="#">Sign Up</a>
  <a class="btn btn-medium btn-orange  btn-radius" href="#">Sign In</a>
  <a class="btn btn-medium btn-red btn-radius" href="#">Read More</a>
  <a class="btn btn-medium btn-gray btn-radius" href="#">Forgot Password</a>

  <hr />

  <h2>Medium Buttons</h2>
  <a class="btn btn-medium btn-blue" href="#">Download</a>
  <a class="btn btn-medium btn-green" href="#">Sign Up</a>
  <a class="btn btn-medium btn-orange" href="#">Sign In</a>
  <a class="btn btn-medium btn-red" href="#">Read More</a>
  <a class="btn btn-medium btn-gray" href="#">Forgot Password</a>

  <hr />

  <h2>Small Buttons</h2>
  <a class="btn btn-small btn-blue" href="#">Download</a>
  <a class="btn btn-small btn-green" href="#">Sign Up</a>
  <a class="btn btn-small btn-orange" href="#">Sign In</a>
  <a class="btn btn-small btn-red" href="#">Read More</a>
  <a class="btn btn-small btn-gray" href="#">Forgot Password</a>

   <hr />

  <h2>Large Buttons</h2>
  <a class="btn btn-large btn-blue" href="#">Download</a>
  <a class="btn btn-large btn-green" href="#">Sign Up</a>
  <a class="btn btn-large btn-orange" href="#">Sign In</a>
  <a class="btn btn-large btn-red" href="#">Read More</a>
  <a class="btn btn-large btn-gray" href="#">Forgot Password</a>

  <hr />

  <p>Colors taken from <a href="http://colours.neilorangepeel.com">colours.neilorangepeel.com</a>.</p>
</div>






@import url(http://fonts.googleapis.com/css?family=Raleway);

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  max-width: 900px;
  margin: 4em auto;
  font-family: Raleway, Arial, sans-serif;
  padding: 1em 2em;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #eee;
    margin: 2em 0;
    padding: 0;
}

h1, h2 {
  margin-bottom: 1em;
  border-bottom: 2px solid #eee;
  line-height: 1.5;
}

h1 > small{
  color: #666;
}

h1 > small > a,
p > a{
  color: #3CB371;
  text-decoration: none;
}
h1 > small > a:hover,
p > a:hover{
  text-decoration: underline;
}

/* Buttons styles */
input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input[type="submit"].btn,
button.btn {
    cursor: pointer;
}

a.btn,.btn {
  margin-right: 1em; /* remove this while use*/
  margin-bottom: 1em; /* remove this while use*/
    display: inline-block;
    outline: none;
    *zoom: 1;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
    font-weight: 300;
    letter-spacing: 1px;
    vertical-align: middle;
    border: 1px solid;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
/* Radius */
.btn-radius {
  border-radius: 3px;
}
/* Sizes */
.btn-small {
    font-size: 0.8125em;
    padding: 0.4125em 1.25em;
}
.btn-medium {
    font-size: 0.9375em;
    padding: 0.5375em 1.375em;
}
.btn-large {
    font-size: 1.0625em;
    padding: 0.5625em 1.5em;
}

/* Colors */
.btn-green {
    color: #3CB371;
    border-color: #3CB371;
}
.btn-green:hover {
  background: #3CB371;
  color: #fff;
  border-color: #3CB371;        
}

.btn-blue {
    color: #4682B4;
    border-color: #4682B4;
}
.btn-blue:hover {
  background: #4682B4;
  color: #fff;
  border-color: #4682B4;        
}

.btn-orange {
    color: #FF8C00;
    border-color: #FF8C00;
}
.btn-orange:hover {
  background: #FF8C00;
  color: #fff;
  border-color: #FF8C00;        
}

.btn-red {
    color: #B22222;
    border-color: #B22222;
}
.btn-red:hover {
  background: #B22222;
  color: #fff;
  border-color: #B22222;    
}

.btn-gray {
    color: #808080;
    border-color: #808080;
}
.btn-gray:hover {
  background: #808080;
  color: #fff;
  border-color: #808080;    
}

希望它有所帮助！

Answer 7

回答编辑不正确

在CSS中，您可以使用border radius属性创建圆角。

border-radius: 10px; 

请参阅W3 Schools

上的以下教程