Basta uma linha apenas de CSS, usando gradient em vez de cor sólida:
background: linear-gradient(170deg, #ffffff 0%,#fff 50%49.8%,#000 50%50.2%,#000 100%);
Segue um exemplo bem simples, já com prefixo para vários navegadores:
#elemento {
background: #ffffff;
background: -moz-linear-gradient(-13deg, #fff 0%, #fff 50%49.8%, #000 50%50.2%, #000 100%);
background: -webkit-linear-gradient(-13deg, #fff 0%,#fff 50%49.8%,#000 50%50.2%,#000 100%);
background: linear-gradient(167deg, #ffffff 0%,#fff 50%49.8%,#000 50%50.2%,#000 100%);
width:400px;
height:180px;
border: 1px solid red;
text-align:center;
color:#ccc;
font-size:80px;
}
<div id="elemento">TEXTO<br>TEXTO</div>
Pus as versões prefixadas mais para mostrar a diferença de sintaxe na parte do ângulo, mas as versões modernas dos browsers trabalham bem sem os prefixos.
Deixei um mínimo "vão" de 0.4 no encontro do centro para melhorar a interpolação. Vale dizer que os browsers que são baseados em Chromium tem uma implementação precária que leva a fazer um pouco de serrilhamento, isso é problema de programação do browser e não na técnica utilizada. Tanto que no IE11, por exemplo, fica perfeito.