Skip to main content
adicionou 507 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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.

Basta uma linha apenas de CSS, usando gradient em vez de cor sólida:

background: linear-gradient(170deg, #ffffff 0%,#fff 50%,#000 50%,#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%, #000 50%, #000 100%);
  background: -webkit-linear-gradient(-13deg, #fff 0%,#fff 50%,#000 50%,#000 100%);
  background: linear-gradient(167deg, #ffffff 0%,#fff 50%,#000 50%,#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>

Basta uma linha apenas de CSS, usando gradient em vez de cor sólida:

background: linear-gradient(170deg, #ffffff 0%,#fff 49.8%,#000 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 49.8%, #000 50.2%, #000 100%);
  background: -webkit-linear-gradient(-13deg, #fff 0%,#fff 49.8%,#000 50.2%,#000 100%);
  background: linear-gradient(167deg, #ffffff 0%,#fff 49.8%,#000 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.

Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Basta uma linha apenas de CSS, usando gradient em vez de cor sólida:

background: linear-gradient(170deg, #ffffff 0%,#fff 50%,#000 50%,#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%, #000 50%, #000 100%);
  background: -webkit-linear-gradient(-13deg, #fff 0%,#fff 50%,#000 50%,#000 100%);
  background: linear-gradient(167deg, #ffffff 0%,#fff 50%,#000 50%,#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>