我的形状看起来像这样
它是一个矩形,后面带有一个圆。我需要在周围周围做一个边框。
代码-jsfiddle
.template {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rectangle {
background: red;
width: 91mm;
height: 63mm;
border-radius: 2mm;
}
.circle {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: -999;
background: red;
width: 68mm;
height: 68mm;
border-radius: 100%;
}
<div class="template">
<div class="rectangle"></div>
<div class="circle"></div>
</div>
关于如何实现甜美边界的任何想法?
答案 0 :(得分:2)
使用径向渐变的伪元素:
.box {
width:200px;
height:150px;
background:red;
border-radius:10px;
position:relative;
margin-top:50px;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,red 49.5%,transparent 50%) top/150% 400%;
}
<div class="box">
</div>
然后您可以添加边框:
.box {
width:200px;
height:150px;
background:red;
border-radius:10px;
position:relative;
margin-top:50px;
border:3px solid blue;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,red 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
}
<div class="box">
</div>
还要使用透明颜色:
.box {
width:200px;
height:150px;
background:rgba(255,0,0,0.5) padding-box;
border-radius:10px;
position:relative;
margin-top:50px;
border:3px solid blue;
border-top-color:transparent;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,rgba(255,0,0,0.5) 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
}
.box:after {
content:"";
position:absolute;
top:-3px;
height:100%;
left:-3px;
right:-3px;
border-top:3px solid blue;
border-right:3px solid transparent;
border-left:3px solid transparent;
border-radius:inherit;
clip-path:polygon(0 0,28px 0,28px 50px,calc(100% - 28px) 50px,calc(100% - 28px) 0, 100% 0,100% 100%,0 100%);
}
body {
background:url(https://picsum.photos/id/1001/800/800) center/cover;
}
<div class="box">
</div>