Text slide effect

Looks like text has been sliced in half

HTML

<div class='slice'>
    <div class='line'>
        <div class='left'>
            <p>Laceration</p>
        </div>
    </div>
    
    <div class='right'>
        <p>Laceration</p>
    </div>
</div>

CSS

div.slice {
    position: relative;
    margin: 50px;
}

div.slice div.left, div.slice div.right {
    position: absolute;
}

div.slice div.right {
    top: 40px;
    left: 40px;
}

div.slice div.left {
    transform: rotate(-30deg);
    top: 20px;
    left: 55px;
}

div.slice div.line {
    border-right: 1px solid #444444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    transform: rotate(30deg);
    background-color: #FFFFFF;
    z-index: 10;
    position: absolute;
    top: -40px;
    left: 0;
}