如何扩大这4个三角形的正方形？

Question

当它变小时，三角形不会保持在一起。

如何修复以便正确缩放？

要重现，请移动窗口并缩放，您将看到三角形变得混乱不堪。

当它变小时，三角形不会保持比例。

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 class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id="CHahce95B1g"></div>

      </div>
      
      <div class="panel-left"></div>
      <div class="panel-right"></div>
      <div class="panel-up"></div>
      <div class="panel-down"></div>
      
    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
      </a>

  </div>
  <button class="play" 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;
  }

- Eve Ninnall

---

你指的是“移动窗口进出”是什么意思？ - zenly

三角形在变小时不会保持比例。 - Eve Ninnall

Answer 1

不要使用边框。这里有另一个使用剪辑路径和渐变的想法。

为了演示，我只保留了相关的样式：

.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 class="box"></div>

- Temani Afif

---

你这样写的话，我该怎么在这里应用它？https://jsfiddle.net/j10eurz3/ - Eve Ninnall