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

时间:2019-04-24 06:47:00

标签: css

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

Image of what i want to achieve

如果无法在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>

2 个答案:

答案 0 :(得分:0)

如果您想要更大的白色部分,然后增加“ 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>

答案 1 :(得分:0)

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

.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:0right: 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>