我正在尝试使用CSS使用径向渐变为图像制作扇形边框。这是我到目前为止的内容:JS FIDDLE。
如您所见,图像的顶部边缘有尖的尖端,而底部边缘则是圆形的。如何在底部找到尖的技巧? (就像底边倒过来一样。)
多谢您的协助!
HTML:
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
CSS:
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://placekitten.com/1280/120");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: -20px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
最佳答案
使用与顶部相同的径向渐变,但是在这里只需将其旋转180度
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://www.rhapsodazzle.com/flowers.jpg");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: 0;/*-20px;*/
transform: rotate(180deg); /* added */
left: 0px;
width: 100%;
content:" ";
background: radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
/*
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);*/
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
JSfiddle链接:jsfiddle.net/oq2ja51g/3/