Question

我正试图在一个盒子的右下角挖空圆圈。

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

<！/ P>

我尝试使用径向渐变，但我不能像我想要的那样定位。

它实际上效果很好但只在中心

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

试试这个代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

这是定位的核心。

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

    }

使用图片编辑

＆＃13;

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

＆＃13;

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

＆＃13;

框中一角的CSS透明空心圆

2 个答案: