user3504783 user3504783 - 29 days ago 18
CSS Question

CSS scalloped border for image using radial-gradients

I'm trying to use CSS to make a scalloped border for an image using radial-gradients. Here is what I have so far: JS FIDDLE.

As you can see, the top edge of the image has pointy tips, while the bottom edge is rounded. How can I get the pointy tips at the bottom as well? (Like the bottom edge flipped upside down.)
I would appreciate your help!

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://www.rhapsodazzle.com/flowers.jpg");
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;
}

pol pol
Answer

Use the same radial-gradient you have on the top, but here you just rotate it 180 degrees

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 link: jsfiddle.net/oq2ja51g/3/

Comments