切出圆形按钮

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() 但这也产生了相同的结果，none 圆角。

Answer 1

答案编辑不正确

在您的 CSS 中，您可以使用边框半径属性创建圆角。

border-radius: 10px;

请参阅 W3 Schools

上的以下教程

Answer 2

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

我做了什么：

为
内的元素添加了大边框。

向元素添加了绝对位置。

定位 a 元素减去顶部和减去左边等于它的边框。

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

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

亲爱的，您只为所有按钮使用了一张图片，请尝试使用不同的图片。

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;    
}

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

Answer 5

伪元素

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

只需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>

方框阴影

这也可以使用带有框阴影的伪元素来实现。

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 6

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

.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;}

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

Answer 7

如果您将按钮作为锚而不是无序列表，那么每个人给您的答案都是合乎逻辑的

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

这是一个很好的例子（codepen 中的 copy/paste 正如您将看到的，以免重新发明轮子，并且因为代码非常干净）：

<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;    
}

希望对您有所帮助！

切出圆形按钮

rounded buttons cut out

html

css

css-shapes

伪元素

方框阴影