CSS中的倒装边框如何使这个像素完美

Question

下面是显示倒边框的代码，我确实更改了profile-box：after中的值，但似乎没有任何变化：

如果无法在CSS中实现此功能，那么我将不得不使用背景图片。

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after{
  content: "" !important;
  display: block !important;
  background: #fff !important;
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 20px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<br>
<div class="row">
        <div class="col-md-6">
        <div class="profile-box ">
        
        </div>
        
        </div>
        
        </div>
        
</div>

<br><br><br><br>

Answer 1

如果您想要更大的白色部分，然后增加“ profile-box：after”的宽度，然后减去“ top”和“ right”位置的宽度为主要宽度的50％，那么我认为这段代码会为您提供帮助。 / p>

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after{
  content: "" !important;
  display: block !important;
  background: #fff !important;
  position: absolute !important;
  top: -50px !important;
  right: -50px !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<br>
<div class="row">
        <div class="col-md-6">
        <div class="profile-box ">
        
        </div>
        
        </div>
        
        </div>
        
</div>

<br><br><br><br>

Answer 2

您可以使用径向渐变背景来实现此目的-参见下面的演示

.profile-box {
  position: relative;
  overflow: hidden;
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
  background: radial-gradient(10px 10px at top right,transparent 49px,#7a277b 50px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="profile-box"></div>
    </div>
  </div>
</div>

---

如果您使用的是伪元素，则可以更轻松地完成操作：

• 使用top:0和right: 0在右上角的位置，
• 使用translate定位伪元素。

请参见下面的演示

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after{
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="profile-box"></div>
    </div>
  </div>
</div>

---

另一种选择是在伪元素上使用clip-path圆圈，但使用背景颜色（与周围的元素匹配）-请参见下面的演示

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  clip-path: circle(50px at 100% 0);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="profile-box"></div>
    </div>
  </div>
</div>