下面是显示倒边框的代码,我确实更改了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>
答案 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: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>