CSS 框角透明空心圆圈

Question

我想在一个盒子的右下角画一个空心圆圈。

这就是我想做的，但我不知道该怎么做。

!

我试过使用径向渐变，但我无法按我想要的方式定位它。

它实际上工作得很好，但只在中心

Answer 1

我不确定是否完全理解你的问题。不管怎样，这是你想要的吗：

https://codepen.io/Scipionh/pen/XVzeQQ

这里是css（在sass）：

.text {
  height: 200px;
  width: 100px;
  background-color: yellow;
  position: relative;
  &::after {
    content:'';
    border-radius: 100px;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: green;
  }
}

?

Answer 2

试试这个片段。

body {
  background-color: #434448;
  height: 100vh;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test {
  position: relative;
  width: 240px;
  height: 480px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 1.25rem
}

.box {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  border-radius: 10px;
}

.corner {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(center, circle, transparent 20px, rgba(255, 0, 0) 20px);
}

.inner {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

#circle {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #E0E0E0;
  opacity: .9;
}

<div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="box">
    <div class="corner">
      <div class="inner">
        <div id="circle">
          <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-md.png" height="50px" width="50px" style="margin-left:0.25rem; margin-top:0.25rem">
        </div>
      </div>

    </div>
  </div>
  <div>

这是定位的核心。

 .inner{
    position: absolute;
    right: 0px;
    bottom: 0px;

    }

Edited with an image

body {
  background-color: #434448;
  height: 100vh;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test {
  position: relative;
  width: 240px;
  height: 480px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 0 1.25rem
}

.box {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  border-radius: 10px;
}

.corner {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(center, circle, transparent 20px, rgba(0, 0, 0, 1) 20px);
}

.inner {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

<div class="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="box">
    <div class="corner">
      <div class="inner">
        <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-md.png" height="50px" width="50px">
      </div>

    </div>
  </div>
  <div>

CSS 框角透明空心圆圈

CSS transparency hollow circle in corner of box

html

css

geometry

transparent