我将如何为这个设计制作剪辑路径?
How would I make a clip path for this design?
.test02 {
text-align: center;
color: #fff;
background-color: orange;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 0.2rem 0;
}
.test {
border: 2px solid orange;
padding: 1rem;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 5rem;
}
body {
background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}
<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">
</div>
我知道我想为此制作一个剪辑路径,但我不知道怎么做。这种 CSS 样式对我来说有点高级。我可以很好地制作边框,但不知道如果有意义的话,你如何制作一个由内而外的边框。
试试这个代码:
clip-path: polygon(0 0, 100% 1%, 73% 69%, 28% 70%);
只需使用两个 div 并给他们这样的样式
<div style=" background: black; height: auto; border: 1px solid black; width: 30em; border-top: 2em solid; border-radius: 1.5em; position: relative;">
<div style=" position: absolute; top: -2em; text-align: center; width: 100%; color: white; z-index: 10; height: 2em; padding: 5px; box-sizing: border-box;">Your text</div>
<div style=" height: 500px; background: green; border: 1px solid black; border-radius: 1.5em;"></div>
</div>
如果你想使用背景图片有很多方法,使用透明边框并将背景定位为 background-position: top -2em right 0。或者在 child div(body),或者对 header 和 body(children) 使用绝对位置。您也可以使用 padding-top 而没有 borders.Or 只需使用://图像不受版权保护
.main{
background: url(https://i.postimg.cc/gkR1JM8t/rolv-skjaerpe-3r-Nz5-Sn-c-Ms-unsplash.jpg);
height: auto;
border-radius: 1em;
position: relative;
padding: 0.1em;
background-size: cover;
}
.header{
text-align: center;
width: 100%;
color: white;
min-height: 2em;
padding: 5px;
box-sizing: border-box;
}
.body{
height: 20em;
background: white;
border-radius: 1em;
}
<div class="main">
<div class="header">Your text</div>
<div class="body" style=""></div>
</div>
您可以使用以下 svg(在您使用深色主题的情况下添加额外的白色描边)来剪掉不需要的部分并保留背景:
然后使用:before, :after
将这个剪裁的div左右放置。
还使用 transform: scaleX(-1)
翻转右角。
.test02 {
text-align: center;
color: #fff;
background-color: orange;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 0.2rem 0;
}
.test {
border: 2px solid orange;
padding: 1rem;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 5rem;
position: relative;
color: white;
}
.test:before,
.test:after {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: -1px;
background-color: orange;
clip-path: url(#cp)
}
.test:before {
left: 0;
}
.test:after {
right: 0;
transform: scaleX(-1);
}
body {
background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}
<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">
</div>
<svg height="0">
<defs>
<clipPath id="cp">
<path d="m0 0v20c2.7868e-5 -10.559 8.1925-19.308 18.729-20z" fill="black"/>
</clipPath>
</defs>
</svg>
.test02 {
text-align: center;
color: #fff;
background-color: orange;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 0.2rem 0;
}
.test {
border: 2px solid orange;
padding: 1rem;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 5rem;
}
body {
background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}
<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">
</div>
我知道我想为此制作一个剪辑路径,但我不知道怎么做。这种 CSS 样式对我来说有点高级。我可以很好地制作边框,但不知道如果有意义的话,你如何制作一个由内而外的边框。
试试这个代码:
clip-path: polygon(0 0, 100% 1%, 73% 69%, 28% 70%);
只需使用两个 div 并给他们这样的样式
<div style=" background: black; height: auto; border: 1px solid black; width: 30em; border-top: 2em solid; border-radius: 1.5em; position: relative;">
<div style=" position: absolute; top: -2em; text-align: center; width: 100%; color: white; z-index: 10; height: 2em; padding: 5px; box-sizing: border-box;">Your text</div>
<div style=" height: 500px; background: green; border: 1px solid black; border-radius: 1.5em;"></div>
</div>
如果你想使用背景图片有很多方法,使用透明边框并将背景定位为 background-position: top -2em right 0。或者在 child div(body),或者对 header 和 body(children) 使用绝对位置。您也可以使用 padding-top 而没有 borders.Or 只需使用://图像不受版权保护
.main{
background: url(https://i.postimg.cc/gkR1JM8t/rolv-skjaerpe-3r-Nz5-Sn-c-Ms-unsplash.jpg);
height: auto;
border-radius: 1em;
position: relative;
padding: 0.1em;
background-size: cover;
}
.header{
text-align: center;
width: 100%;
color: white;
min-height: 2em;
padding: 5px;
box-sizing: border-box;
}
.body{
height: 20em;
background: white;
border-radius: 1em;
}
<div class="main">
<div class="header">Your text</div>
<div class="body" style=""></div>
</div>
您可以使用以下 svg(在您使用深色主题的情况下添加额外的白色描边)来剪掉不需要的部分并保留背景:
然后使用:before, :after
将这个剪裁的div左右放置。
还使用 transform: scaleX(-1)
翻转右角。
.test02 {
text-align: center;
color: #fff;
background-color: orange;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 0.2rem 0;
}
.test {
border: 2px solid orange;
padding: 1rem;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 5rem;
position: relative;
color: white;
}
.test:before,
.test:after {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: -1px;
background-color: orange;
clip-path: url(#cp)
}
.test:before {
left: 0;
}
.test:after {
right: 0;
transform: scaleX(-1);
}
body {
background: url('https://images.ctfassets.net/hrltx12pl8hq/8MpEm5OxWXiNqLvWzCYpW/24f02cfe391aa8f25845de858982d449/shutterstock_749707636__1__copy.jpg?fit=fill&w=840&h=350');
}
<div class="test02">If you'd like to do it now, please check box below</div>
<div class="test">
</div>
<svg height="0">
<defs>
<clipPath id="cp">
<path d="m0 0v20c2.7868e-5 -10.559 8.1925-19.308 18.729-20z" fill="black"/>
</clipPath>
</defs>
</svg>