3

Как можно сверстать такой фон для слайдера. Хотелось бы конечно на чистом css, но это если такое возможно. Большое спасибо за помощь и варианты!

Фон для слайдера

4
  • 3
    данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 7 апр 2020 в 6:32
  • @Sevastopol', я абсолютно серьёзен. предлагаю именно закрыть (не удалить). ведь «таких фонов для слайдера» существует бесконечно много. то, что сейчас есть всего один вопрос, в котором присутствуют ключевые слова «такой фон для слайдера» — это всего лишь вопрос времени (да, тавтология). когда вопросов с такими ключевыми словами станет больше, то отличить их один от другого можно будет лишь открыв каждый и взглянув на картинку. // вопрос можно (и нужно) «спасти», добавив словесное описание вместо бессмысленного «такой». 7 апр 2020 в 10:23
  • @Sevastopol', 1. ещё раз повторяю: я проголосовал за закрытие вопроса, а не за его удаление. 2. если бы я понимал, что именно автор вопроса (а также девять поставивших ему плюс, не говоря уже про трёх авторов ответов) подразумевал под термином «такой», я бы обязательно внёс соответствующую правку. судя по всему, например, вы — отлично поняли, что именно подразумевалось. опишите это, пожалуйста, в тексте вопроса. 7 апр 2020 в 10:57
  • @Sevastopol', так что, «спасать» вопрос будете? или вы также как и я не понимаете, что именно автор вопроса подразумевал под словом «такой«? (это шутка: вы же явно поняли, раз дали ответ). 7 апр 2020 в 20:46

2 ответа 2

5

Дальше в js завести массив с изображениями и перебирать их и подставлять в pattern

может быть не красиво ..чуть чуть доработать

<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="ptn" width="100%" height="100%">
      <image href="https://st3.depositphotos.com/3825437/16659/i/950/depositphotos_166596632-stock-photo-kids-outside-in-park.jpg" 
             width="100%" height="100%" x="0" y="0"
             preserveAspectRatio="none"/>
    </pattern>
  </defs>
  
  <path d="M72,120 250,4 434,120 388,150 432,180 250,297 70,180 118,150z" 
        stroke="#ccc" stroke-width="8" stroke-linejoin="round"
        fill="url(#ptn)"/>
  <g>
    <title>Левая кнопка</title>
    <path d="M0,85 103,150 0,214z" fill="blue"  class="left_btn"/>
    <path d="M76,142 60,150  76,158" fill="none" stroke="#fff" stroke-width="2"/>
  </g>
  <g>
   <title>Правая кнопка</title>
   <path d="M403,150 500,85 500,214" fill="red" class="right_btn"/>
   <path d="M430,144 450,150 430,160" fill="none" stroke="#fff" stroke-width="2"/>
  </g>
</svg>

Второй вариант на clip-path SVG

<svg  version="1.1" viewBox="-77 50 362 206" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <clipPath id="cp">
      <path d="m-16.303441 131.56016 120.27128-77.508162 120.27129 77.240892-33.40869 21.38156 33.14142 20.84703-120.27128 77.50816-120.80583-77.77543 33.94323-20.84703z" />
  </clipPath>
 </defs>

    <image href="https://mota.ru/upload/wallpapers/source/2015/02/16/12/01/43158/049.jpg" 
	            width="100%"
				height="100%"  
				preserveAspectRatio="none"
				x="-16" y="50" 
				clip-path="url(#cp)"/>
 
 <path d="M -24.699503,172.48205 103.47098,255.32812 232.55691,172.56033 198.84853,152.40718 231.8496,131.97056 105.73884,50.937498 101.29762,50.843005 -25.135416,131.63542 8.5044641,152.4241 Z" 
           fill="none" 
		   stroke="#000"  
		   stroke-width="1"/>

 
 

  <path d="m5.7462948 152.27355-82.853553 50.38031 0.133636-99.5579z" fill="red" />
  <path d="m201.25396 152.40718 82.79514-50.4429v99.59673z" fill="blue" />

 
</svg>

Вариант на css без обводки не адаптивный, как адаптировать надо подумать

html,body{
  margin: 0;
  height: 100%;
}

.items{
  width: 100%;
  height: 320px;
  position: relative;
}

.fill-nav{
  position: absolute;
  width: 800px;
  top: 50% ;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fill{
  width: 640px;
  height: 320px;
  background: url(https://mota.ru/upload/wallpapers/source/2015/02/16/12/01/43158/049.jpg);
  background-size: 100% 100%;
  clip-path: polygon(100% 75%, 75% 50%, 100% 25%, 50% 0%, 0% 25%, 25% 50%, 0% 75%, 50% 100%);
  margin: auto;
}

.fill-nav_left{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 0 90px 200px;
  border-color: transparent transparent transparent #007bff;
}

.fill-nav_right{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 200px 90px 0;
  border-color: transparent #007bff transparent transparent;

}
<div class="items">
<div class="fill"></div>
<div class="fill-nav">
  <div class="fill-nav_left"></div>
  <div class="fill-nav_right"></div>
</div>
</div>

Смотреть пример на мобилке clip-path css

3
1

Решение на CSS с применением свойства clip-path: polygon. Полностью адаптивно.

* {
  margin: 0;
  padding: 0;
}

.bdr {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 400px;
  width: 100%;
}

.bdr_a {
  position: relative;
  overflow: hidden;
  clip-path: polygon( 50% 0, 90% 40%, 80% 50%, 90% 60%, 50% 100%, 10% 60%, 20% 50%, 10% 40%);
  height: 100vh;
  min-height: 400px;
  width: 100%;
  background-color: gray;
}

.bdr_b,
.bdr_a:before,
.bdr_b:before,
.img {
  content: '';
  display: block;
  position: absolute;
  clip-path: polygon(50% 0, 90% 40%, 80% 50%, 90% 60%, 50% 100%, 10% 60%, 20% 50%, 10% 40%);
}

.bdr_a:before {
  top: 1px;
  left: 1px;
  height: calc(100vh - 2px);
  min-height: calc(400px - 2px);
  width: calc(100% - 2px);
  background-color: white;
}

.bdr_b {
  top: 10px;
  left: 20px;
  height: calc(100vh - 20px);
  min-height: calc(400px - 20px);
  width: calc(100% - 40px);
  background-color: black;
}

.bdr_b:before {
  top: -10px;
  left: -100px;
  height: calc(100vh + 10px);
  min-height: calc(400px + 10px);
  width: calc(100% + 200px);
  background-color: white;
}

.img {
  top: 2px;
  left: 2px;
  height: calc(100vh - 24px);
  min-height: calc(400px - 24px);
  width: calc(100% - 4px);
  background-color: white;
}

img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 400px;
}

.bdr_l,
.bdr_r {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 400px;
  width: 100%;
}

.bdr_l {
  clip-path: polygon(0% calc(30% + 4px), calc(20% - 8px) calc(50% + 0px), 0% calc(70% - 8px));
  background-color: #ef4236;
}

.bdr_r {
  clip-path: polygon(100% calc(30% + 4px), calc(80% + 8px) calc(50% + 0px), 100% calc(70% - 8px));
  background-color: #607b86;
}

.bdr_l:before,
.bdr_r:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 400px;
  width: 100%;
  background-color: lightgray;
}

.bdr_l:before {
  clip-path: polygon(14% 47%, 11% 50%, 14% 53%, 14% calc(53% - 1px), 11% calc(50% - 1px), 14% calc(47% - 1px));
}

.bdr_r:before {
  clip-path: polygon( 86% 47%, 89% 50%, 86% 53%, 86% calc(53% - 1px), 89% calc(50% - 1px), 86% calc(47% - 1px));
}

.bdr_l:hover {
  background-color: darkred;
}

.bdr_r:hover {
  background-color: darkslategray;
}

.bdr_l:hover:before,
.bdr_r:hover:before {
  background-color: white;
}
<div class="bdr">
  <div class="bdr_a">
    <div class="bdr_b">
      <div class="img"><img src="https://avatars.mds.yandex.net/get-altay/1001354/2a00000162870a1502d58ac2f093f4b64785/XXL"></div>
    </div>
  </div>
  <a href="#">
    <div class="bdr_l"></div>
  </a>
  <a href="#">
    <div class="bdr_r"></div>
  </a>
</div>

3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.