Зубчатая граница CSS для изображения с использованием радиальных градиентов

Я пытаюсь использовать 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;
}

css radial-gradients
person user3504783    schedule 04.11.2016    source источник
comment
Вы имеете в виду как это (или) как в последнем фрагменте/изображении здесь - stackoverflow.com/questions /25895895/?   -  person Harry    schedule 04.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Используйте тот же радиальный градиент, что и наверху, но здесь вы просто поворачиваете его на 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/

person pol    schedule 04.11.2016
comment
Большое спасибо! Это именно то, что я искал. Я знаю, что это не по теме, но вы не знаете, как убрать белую рамку справа? - person user3504783; 04.11.2016
comment
@ user3504783 Установите поля body равными нулю, а left в .container - jsfiddle.net/oq2ja51g/4 - person pol; 04.11.2016