如何在背景上方和边框后面的按钮的右上角添加圆圈? [英] How to add a circle on the top right corner of a button above the background and behind the border?

问题描述

我想通过使用CSS达到以下结果:

I wanna achieve the following result by using CSS:

因此，基本上，我希望圆位于按钮背景的顶部但在其边框的后面，并且按钮位于背景的顶部

So basically I want the circle to be on top of the button background but behind its border, with the button on top of the background

使用以下代码，我可以绘制一个类似的按钮:

With the following code I am able to draw a similar button:

.container {
  margin-top: 30px;
}

button {
  font-size: 20px;
  border: 2px solid black;
  padding: 8px 20px;
  position: relative;
}

.container .circle {
  position: absolute;
  top: -21px;
  right: -21px;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: #4da6ff;
}

<div class="container">
  <button>Test Button
        <span class="circle"></span>
      </button>
</div>

结果:

这里的问题是圆圈在按钮的顶部，但也在其边界的顶部.

The problem here is that the circle is on top of the button, but also on top of its border.

推荐答案

一个想法是将缺失的边框整合到圆内

One idea is to integrate the missing borders inside the circle

.container {
  margin-top: 30px;
}

button {
  font-size: 20px;
  border: 2px solid black;
  padding: 8px 20px;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  transform:translate(50%,-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: 
   linear-gradient(black,black) left  /50% 2px,
   linear-gradient(black,black) bottom/2px 50%,
   #4da6ff;
 background-repeat:no-repeat;
}

<div class="container">
  <button>Test Button</button>
</div>

或者您可以简单地考虑mix-blend-mode.您必须注意所使用的值，因为它取决于颜色的组合.在这种情况下，合适的是darken

Or you can simply consider mix-blend-mode. You have to pay attention to the value used as it will depend on the combination of the colors. In this case, the suitable one is darken

.container {
  margin-top: 30px;
}

button {
  font-size: 20px;
  border: 2px solid black;
  padding: 8px 20px;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  transform:translate(50%,-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4da6ff;
  mix-blend-mode:darken;
}

<div class="container">
  <button>Test Button</button>
</div>

仅使用背景的第三种方法:

A third way more fancy with only backgrounds:

button {
  font-size: 20px;
  border:0 solid transparent;
  border-top-width:24px;
  border-right-width:24px;
  padding: 8px 20px;
  background:
     linear-gradient(black,black) top   /100% 2px,
     linear-gradient(black,black) bottom/100% 2px,
     linear-gradient(black,black) left  /2px 100%,
     linear-gradient(black,black) right /2px 100%,
     radial-gradient(circle, #4da6ff 19px,transparent 20px) left bottom/200% 200% padding-box border-box,
     #e2e2e6 padding-box;
  background-repeat:no-repeat;
}

<div class="container">
  <button>Test Button</button>
</div>

另一个想法是将圆放置在元素后面并切割背景:

Another idea is to place the circle behind the element and cut the background:

.container {
  margin-top: 30px;
  position:relative;
  z-index:0;
}

button {
  font-size: 20px;
  border: 2px solid black;
  padding: 8px 20px;
  position: relative;
  background:radial-gradient(circle at top right,transparent 19px,#e2e2e6 20px);
}

button:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: -1px;
  right: -1px;
  transform:translate(50%,-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:#4da6ff;
}

<div class="container">
  <button>Test Button</button>
</div>

这篇关于如何在背景上方和边框后面的按钮的右上角添加圆圈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！