css vs svg - формирование фигурных границ

#html #css #css3 #svg #border

Можно ли с помощью css сформировать блок div так, как он изображён на картинке?



т.е. сверху прозрачный элемент (за ним будет виден фон), снизу - основной элемент,
как я понимаю - снизу обычный background у div
а сверху надо как-то сформировать с помощью border,
но как?
    

Ответы

Ответ 1

В сети давно гуляют примеры реализации. Вот один из них:



$(function() {
  $("li").click(function(e) {
    e.preventDefault();
    $("li").removeClass("active");
    $(this).addClass("active");
  });
});
* {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  background: #222;
}

#content {
  text-align: center;
  padding: 50px;
  background: white;
  min-height: 400px;
}

.tabs {
  display: table;
  list-style: none;
  margin: 60px auto 0;
}

.tabs li {
  /* Makes a horizontal row */
  float: left;
  /* So the psueudo elements can be
			   abs. positioned inside */
  position: relative;
}

.tabs a {
  /* Make them block level
		     and only as wide as they need */
  float: left;
  padding: 10px 40px;
  text-decoration: none;
  /* Default colors */
  color: black;
  background: #ddc385;
  /* Only round the top corners */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.tabs .active {
  /* Highest, active tab is on top */
  z-index: 3;
}

.tabs .active a {
  /* Colors when tab is active */
  background: white;
  color: black;
}

.tabs li:before,
.tabs li:after,
.tabs li a:before,
.tabs li a:after {
  /* All pseudo elements are
		     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}


/* Only the first, last, and active
		   tabs need pseudo elements at all */

.tabs li:last-child:after,
.tabs li:last-child a:after,
.tabs li:first-child:before,
.tabs li:first-child a:before,
.tabs .active:after,
.tabs .active:before,
.tabs .active a:after,
.tabs .active a:before {
  content: "";
}

.tabs .active:before,
.tabs .active:after {
  background: white;
  /* Squares below circles */
  z-index: 1;
}


/* Squares */

.tabs li:before,
.tabs li:after {
  background: #ddc385;
  width: 10px;
  height: 10px;
}

.tabs li:before {
  left: -10px;
}

.tabs li:after {
  right: -10px;
}


/* Circles */

.tabs li a:after,
.tabs li a:before {
  width: 20px;
  height: 20px;
  /* Circles are circular */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #222;
  /* Circles over squares */
  z-index: 2;
}

.tabs .active a:after,
.tabs .active a:before {
  background: #ddc385;
}


/* First and last tabs have different
		   outside color needs */

.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}

.tabs li a:before {
  left: -20px;
}

.tabs li a:after {
  right: -20px;
}


  
One
  
Two
  
Three
  
Four


  
Round Out Tabs





По ссылке подробно описан весь процесс. Правда добиться округления именно с прозрачным
фоном скорее всего не получится. В этом случае необходимо смотреть в сторону clip-path.


Ответ 2

Решение SVG

Для решения подобного рода задач идеально подходит SVG. Графика на сайте должна быть
векторной, так как векторное изображение имеет минимальный вес и по определению является
адаптивным.     

Для создания векторной фигуры вам понадобятся минимальные знания работы в векторном
редакторе и несколько строчек кода SVG  

Преобразуем растровую картинку в векторную:    

Я постараюсь подробно изложить все шаги, чтобы даже люди, которые не работали в векторном
редакторе, могли повторить эту работу на другом, своем примере. 

Данная техника подойдёт и для других целей,- например для создания
   патчей маски и clipPath      

Растровую картинку можно сразу загрузить в векторный редактор, но при этом способе
возникает много нюансов с преобразованиями, с возможными последующими проблемами  масштабирования,
стилизацией. Не будем пока рассматривать этот вариант, используем другую технику.    


Создание файла svg для загрузки растрового изображения в векторный
редактор. 
Изображение имеет размеры 500x500px, поэтому viewBox="0 0 500 500"    




	 





Открываем этот файл svg с помощью векторного редактора      


И с помощью инструмента рисование кривых  Безье  -    рисуем контур.    



Для более точного повторения контура необходимо сделать узловые точки "автоматически
сглаженными"  Для этого удерживая shift щёлкаем по выбранным узлам 

      

И с помощью рычагов управления узловых точек добиваемся совпадения контура с изображением.
      

     


Сохраняем файл в векторном редакторе в формате *.svg   
Открываем файл в текстовом редакторе и копируем 
Можно было бы использовать получившийся файл svg inkscape, но он слишком перегружен
служебной информацией, а нам нужна всего лишь одна строчка с патчем, которую можно
использовать и для решения  вопроса автора, а также в дальнейшем  для создания масок
и клип патчей.  


Ниже пример с необходимыми контурами, но пока без фона 



#Border {
	fill:#0090D0;
	stroke-width:2;
	stroke:#0090D0;
	}
	 


    


Добавляем фон   




 .container { 
   width:25%;
   height:auto;
    background-image:url(https://i.stack.imgur.com/ikD0n.png);
	background-size:cover;
   }
	#Border {
	fill:#0090D0;
	stroke-width:2;
	stroke:#0090D0;
	}
	
	  




Ответ 3

реализовал полностью на css



.popup-menu {
  z-index: 3;
  position: relative;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.popup-menu li ul {
  display: none;
  position: absolute;
  top: 42px;
  left: 0px;
  min-height: calc(25px + 2px);
  margin: 0px;
  padding: 40px 0px 0px 0px;
  background: #0090d0;
}

.popup-menu li ul:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(100% - 65px - 25px);
  height: 25px;
  background: #f9f9f9 url(../images/white_texture.png) repeat top left;
  border-left: 25px solid #f9f9f9;
  border-bottom-left-radius: 25px;
}

.popup-menu>li:hover>ul {
  display: block;
}

.popup-menu li ul li {
  padding: 10px 15px;
  line-height: 120%;
  white-space: nowrap;
  cursor: pointer;
}

.popup-menu li ul li:hover {
  background: #199bd5;
}

.popup-menu li ul li span {
  color: #ffffff;
  font-family: BebasNeueRegular;
  font-size: 18px;
  font-weight: 400;
}

.popup-menu li ul li span div {
  margin: 0px 15px 0px 0px;
}

.popup-menu li ul li span img.ddm-item {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}  




по сути вся соль в .popup-menu  li  ul:after
единственный недостаток - скругленная накладка сливается с фотоном, но если накрывает
текст, то текст будет невидимым, хотя терпимо, но нет примера совершенству

все таки использование svg - это будет использование и css и svg - менее удобно,
но результат будет конечно лучше, но svg придётся вставлять отдельно