6

Preciso fazer essa forma com CSS. Mas não pode ser com border.

Segue a forma: inserir a descrição da imagem aqui

Não pode ser com borda pelo motivo de que formas usando border não me permitem posicionar textos dentro delas.

10
  • 2
    Não pode ser com borda por que não consigo posicionar texto dentro dela se for feita com borda. É para trabalho prático.
    – Tiago P.C
    Commented 1/12/2015 às 15:36
  • Como pode ver @danilo, são formas diferentes, então não tem como ser duplicata.
    – Tiago P.C
    Commented 1/12/2015 às 15:38
  • Usa uma imagem com o background dessa forma, então, uê, já que o css não antende ;) Commented 1/12/2015 às 15:38
  • @TiagoP.C segue a mesma ideia, não deixa de ser forma geometrica, basta um pouco mais de esforço Commented 1/12/2015 às 15:39
  • 2
    Da uma olhada nisso aqui. html5rocks.com/en/tutorials/shapes/getting-started/… Commented 1/12/2015 às 15:45

2 Respostas 2

6

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.

3
  • esta é ainda uma melhor solução! +1
    – Chun
    Commented 1/12/2015 às 21:59
  • 1
    @Chun eu até gostei da engenhosidade da sua, mas achei relevante colocar o gradient, pois muita gente nao sabe que dá pra fazer "gradient sem gradient", se colar 2 cores sólidas uma na outra. Depois edito a resposta explicando melhor.
    – Largato
    Commented 1/12/2015 às 22:00
  • Muito boa resposta, realmente não sabia que dava pra fazer isso, acho que muito pouca gente sabia, obrigado pela resposta!! +1
    – Tiago P.C
    Commented 2/12/2015 às 10:11
3

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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .