How do I scale this square of 4 Triangles?-CodePudding

When it gets smaller the triangles don't stay together.

How do I fix this so that it is scaled properly?

To reproduce, move the window in and out and you'll see the triangles get all messed up.

The triangles do not stay scaled when it becomes smaller.

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%;
  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-left,
.panel-right,
.panel-up,
.panel-down{
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  width:0;
  height:0;
}
.panel-up {
  left: 0;
  bottom:50%;
  border-top: 180px solid red;
  border-left:320px solid transparent;
  border-right:320px solid transparent;
  }
  .panel-down {
  left: 0;
  top:50%;
  border-bottom: 180px solid blue;
  border-left:320px solid transparent;
  border-right:320px solid transparent;
  }
  .panel-left {
  top:-50%;
  bottom:-50%;
  margin:auto 0;
  border-left: 320px solid green;
  border-top:180px solid transparent;
  border-bottom:180px solid transparent;
  }
  .panel-right {
  top:-50%;
  bottom:-50%;
  right:0;
  margin:auto 0;
  border-right: 320px solid yellow;
  border-top:180px solid transparent;
  border-bottom:180px solid transparent;
  }


/*
.panel-left::before,
.panel-right:before {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  right: 0;
  left: auto;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 180px solid red;
  border-bottom: 180px solid blue;
  transform:translateY(-50%);
  pointer-events: none;
}
.panel-left:before {
  border-left: 320px solid green;
}
.panel-right:before {
  left: 0;
  right: auto;
  border-right: 320px solid yellow;
}
*/

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

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

.curtain.slide .panel-down {
  transform: translateY(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>

.panel-left,
.panel-right,
.panel-up,
.panel-down{
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  width:0;
  height:0;
}
.panel-up {
  left: 0;
  bottom:50%;
  border-top: 180px solid red;
  border-left:320px solid transparent;
  border-right:320px solid transparent;
  }
  .panel-down {
  left: 0;
  top:50%;
  border-bottom: 180px solid blue;
  border-left:320px solid transparent;
  border-right:320px solid transparent;
  }
  .panel-left {
  top:-50%;
  bottom:-50%;
  margin:auto 0;
  border-left: 320px solid green;
  border-top:180px solid transparent;
  border-bottom:180px solid transparent;
  }
  .panel-right {
  top:-50%;
  bottom:-50%;
  right:0;
  margin:auto 0;
  border-right: 320px solid yellow;
  border-top:180px solid transparent;
  border-bottom:180px solid transparent;
  }

CodePudding user response：

Don't use borders. Here is another idea using clip-path and gradients.

For the sake of the demo, I only kept the relevant styles:

.box {
  height: 300px;
  max-width: 600px;
  margin: auto;
  background: linear-gradient(red 50%,blue 0);
  position: relative;
  z-index: 0;
}
.box::before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,green 50%,yellow 0);
  clip-path: polygon(0 0,100% 100%,100% 0,0 100%);
}

body {
  background: #000;
}

<div ></div>

CodePudding user response：

code https://jsfiddle.net/j10eurz3/

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>