How to have image split in 4 triangle shapes-CodePudding

Currently it does it with a color, if I wanted to use an image instead, how would that be done?

It works fine using a color as you can see, how would I be able to use an image here, where it breaks apart the same way, in 4 triangle shapes?

How would this be done?

Clicking on the play button causes it to split into 4 triangle shapes.

Image being: 640 x 360

  background: url("https://i.imgur.com/N15HzPQ.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;

code https://jsfiddle.net/j10eurz3/

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

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

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  /*min-width: 255px;*/
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}


.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel-up,
.panel-down,
.panel-left,
.panel-right {
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  width: 0;
  height: 0;
}

.panel-up {
  left: -100%;
  right: -100%;
  margin: 0 auto;
  bottom: 50%;
  border-top: 180px solid red;
  border-left: 320px solid transparent;
  border-right: 320px solid transparent;
}

.panel-down {
  left: -100%;
  right: -100%;
  margin: 0 auto;
  top: 50%;
  border-bottom: 180px solid blue;
  border-left: 320px solid transparent;
  border-right: 320px solid transparent;
}

.panel-left {
  top: -100%;
  bottom: -100%;
  right: 50%;
  margin: auto 0;
  border-left: 320px solid green;
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
}

.panel-right {
  top: -100%;
  bottom: -100%;
  left: 50%;
  margin: auto 0;
  border-right: 320px solid yellow;
  border-top: 180px solid transparent;
  border-bottom: 180px solid transparent;
}

.curtain.slide .panel-up {
  transform: translateY(calc(-100% - 1px));
}

.curtain.slide .panel-down {
  transform: translateY(calc(100%   1px));
}

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100%   1px));
}

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}


@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

<div >
  <div >
    <div >

      <div >
        <div  data-id="CHahce95B1g"></div>

      </div>
      
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
 
      
    </div>
    <a href="https://www.google.com/">
      <div ></div>
      </a>

  </div>
  <button  type="button" aria-label="Open"></button>
</div>

CodePudding user response：

It can be done by using clip-path with a specific region on each of four elements, using the same background image for each, then shifting by 1px two opposite elements to compensate for clip-path gap (alternatively, that compensation may be included in the clip-path region):

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady() {
    player.setVolume(100);
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;
    player = new YT.Player(video, options);
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    return play;
  }

  return {
    init,
    play
  };
}());
manageCover.init(videoPlayer.init());

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

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  /*min-width: 255px;*/
  display: flex;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}


.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 3s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel-up,
.panel-down,
.panel-left,
.panel-right {
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg) no-repeat center/cover;
}

.panel-up {
  clip-path: polygon(0 0, 50% 50%, 100% 0, 0 0);
  top: 1px;
}

.panel-down {
  clip-path: polygon(0 100%, 50% 50%, 100% 100%, 0 100%);
  top: -1px;
}

.panel-left {
  clip-path: polygon(0 0, 50% 50%, 0 100%, 0 0);
}

.panel-right {
  clip-path: polygon(100% 0, 50% 50%, 100% 100%, 100% 0);
}

.curtain.slide .panel-up {
  transform: translateY(calc(-100% - 1px));
}

.curtain.slide .panel-down {
  transform: translateY(calc(100%   1px));
}

.curtain.slide .panel-left {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .panel-right {
  transform: translateX(calc(100%   1px));
}

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}


@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

<div >
  <div >
    <div >

      <div >
        <div  data-id="CHahce95B1g"></div>

      </div>
      
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
 
      
    </div>
    <a href="https://www.google.com/">
      <div ></div>
      </a>

  </div>
  <button  type="button" aria-label="Open"></button>
</div>

CodePudding user response：

Not a straight solution, but as an example this code shows how to split up one image into two using CSS clip. To mask triangles you will need clip-path.

body {
  margin:0;
  padding:0;
}
section {
  display:flex;
}
#left img {
  position: absolute;
  clip: rect(0px, 340px, 410px, 0px);
}
#right img {
  position: absolute;
  left:30px;
  clip: rect(0px, 640px, 410px, 340px);
}

<section>
  <div id="left">
    <img src="https://i.imgur.com/N15HzPQ.jpg">
  </div>
  <div id="right">
    <img src="https://i.imgur.com/N15HzPQ.jpg">
  </div>
</section>