Preciso fazer essa forma com CSS. Mas não pode ser com border.
Não pode ser com borda pelo motivo de que formas usando border não me permitem posicionar textos dentro delas.
Preciso fazer essa forma com CSS. Mas não pode ser com border.
Não pode ser com borda pelo motivo de que formas usando border não me permitem posicionar textos dentro delas.
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.
Podes fazer isso da seguinte maneira, utilizando a propriedade transform: rotate();
:
.container {
height: 180px;
width: 100%;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.shape {
background: #000;
height: 150px;
width: 112%;
position: absolute;
bottom: -50px;
left: -8px;
transform: rotate(-10deg);
}
.reshape {
color: #fff;
text-align: center;
}
<div class="container">
<div class="shape">
<div class="reshape">texto aqui</div>
</div>
</div>
Se quiseres rodar apenas o texto para a posição inicial:
.container {
height: 180px;
width: 100%;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.shape {
background: #000;
height: 150px;
width: 112%;
position: absolute;
bottom: -50px;
left: -8px;
transform: rotate(-10deg);
}
.reshape {
color: #fff;
text-align: center;
transform: rotate(10deg);
margin-top: 10px;
}
<div class="container">
<div class="shape">
<div class="reshape">texto aqui</div>
</div>
</div>