2 Halves of a Triangle CSS - html

Question

I want to create a CSS animation in which two halves of a triangle split apart in go in opposite directions.
In order to achieve this I need to create a triangle, first. But more importantly the triangle needs to be in 2 halves which you can separately animate. I have searched far and wide on the web and found nothing! I cant believe no one has tried before. Hopefully you CSS wizards can help make this possible. (if you want you can add the animation too! its simple so I don't mind if you don't, thanks.)

Answer 1

Hover over the triangle to see the animation (splitting in halves):
*,
*:before,
*:after {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
body {
padding: 40px;
text-align: center;
}
.triangle {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
position: absolute;
top: 0;
left:0;
transition: all 1s ease;
}
section {
position: relative;
cursor: pointer;
height: 100px;
}
.triangle-4 {
left:0;
transform: rotate(135deg);
width: 60px;
height: 60px;
border-bottom: solid 30px rgb(200,30,50);
border-left: solid 30px transparent; /**/
border-right: solid 30px transparent;
border-top: solid 30px transparent;
}
section:hover > .triangle-5 {
left: 50px;
}
section:hover > .triangle-4 {
left: -50px;
}
.triangle-5 {
transform: rotate(135deg);
width: 60px;
height: 60px;
border-bottom: solid 30px transparent;
border-left: solid 30px black;
border-right: solid 30px transparent;
border-top: solid 30px transparent;
}
<section>
<div class="triangle triangle-4"></div>
<div class="triangle triangle-5"></div>
</section>
References: Triangles
Isosceles Triangle:
*,
*:before,
*:after {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
}
body {
padding: 0 10px;
text-align: center;
}
section {
position: relative;
cursor: pointer;
height: 200px;
width: 100px;
}
.triangle {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
position: absolute;
top: 0;
left:0;
transition: all 1s ease;
}
.triangle-4 {
left:30px;
width: 60px;
height: 60px;
border-bottom: solid 200px red;
border-left: solid 0px transparent;
border-right: solid 60px transparent;
border-top: solid 30px transparent;
}
section:hover > .triangle-5 {
left: -80px;
}
section:hover > .triangle-4 {
left: 80px;
}
.triangle-5 {
left:-30px;
width: 60px;
height: 60px;
border-bottom: solid 200px red;
border-right: solid 0px transparent;
border-left: solid 60px transparent;
border-top: solid 30px transparent;
}
<section>
<div class="triangle triangle-4"></div>
<div class="triangle triangle-5"></div>
</section>