How to split html play in half?

[asasass]

Is it possible to have the play split in half, or can that only be done using an svg?

Would I need to use a div instead of a button?

<div class="play" tabindex="0" role="button" aria-pressed="false" aria-label="Close"></div>

https://jsfiddle.net/upzmL2s3/

.fadeout .split-wrap {
  opacity: 0;
  transition: opacity 3s ease 3s, width 0s 10s, height 0s 10s;
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.curtain.slide .j1 {
  left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.outer.slide .j1 {
  transform: translateX(-50vw);
}

.outer.slide .j2 {
  transform: translateX(50vw);
}

        <div class="split-wrap fadeout">
          <div class="j1">
            <div class="jacketa" title="[ Enjoy The Music ]">
              <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
                <title>[ Enjoy The Music ]</title>
                <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              </svg>
            </div>
          </div>
          <div class="j2">
            <div class="jacketa" title="[ Enjoy The Music ]">
              <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
                <title>[ Enjoy The Music ]</title>
                <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
                <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              </svg>
            </div>

     const splitWrap = document.querySelector(".split-wrap");
     splitWrap.style.pointerEvents = "none";

[PaulOB]

@asasass

Is it possible to have the play split in half,

I think we’ve done that before. Just put one button in the panel left and another button in panel right and line them up over each other.

e.g.

<div class="container">
	<div class="curtain">
		<div class="ratio-keeper">

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

	<div class="background"></div>
	<div class="panel-left"><button class="play-left" type="button"></button></div>
	<div class="panel-right"><button class="play-right" type="button"></button></div>

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

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

And in the CSS:

.play,.play-left,.play-right {
  -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;
}

.play-left{
pointer-events:none;  
}
.play-right{
  pointer-events:npne;
}

@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,
.play-left::before,
.play-right::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;
}
.play-left{
  left:auto;
  right:-45px;
  display:none;
}
.play-right{
  left:-45px;
  right:auto;
  display:none;
}
.slide .play-left,
.slide .play-right{display:block;}