2

Bom galerinha do stack eu preciso fazer esse menu que está no wireframe, porém não sei quais comandos que uso para deixar a linha na diagonal.Segue a imagem abaixo:

Wireframe

OBS: Preciso fazer somente com HTML e CSS, agradeço desde já.E ignorem os números dentro do quadrado azul.

1

2 Respostas 2

3

Segue exemplo que poderia obter este resultado:

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  width: 100%;
}

.menu li {
  display: inline-block;
  padding: 15px;
  position: relative;
  padding-left: 80px;
  background-color: #d3d3d3;
  overflow:hidden;
}

.menu li:before {
  display: block;
  content: " ";
  width: 50px;
  position: absolute;
  left: -70px;
  top: 0px;
  height: 100%;
  transform: rotate(-45deg);
  box-sizing: border-box;
  border-left: 150px solid #fff;
  border-right: rgba(0, 0, 0, 0);
  border-top: rgba(0, 0, 0, 0);
  border-bottom: rgba(0, 0, 0, 0);
}

.menu li:not(:first-child) {
  margin-left: 15px;
}
<ul class="menu">
  <li>Menu 01</li>
  <li>Menu 02</li>
  <li>Menu 03</li>
</ul>

2
  • E caso eu queira manter uma largura(tamanho) fixo?Pois quando coloco texto de diferentes tamanhos dentro ele acaba se ajustando e aumentando sozinho o tamanho da box. Commented 29/06/2017 às 18:01
  • 1
    @LoneTonberry, basta você dar um width fixo ao .menu li tendo em vista que irá quebrar se o texto interno for muito grande. Commented 4/07/2017 às 16:58
1

Fazer a parte inclinada apenas com HTML e CSS pode levar a gambiarras que:

  • vão voltar para te assombrar quando você tiver que dar manutenção;
  • vão dar trabalho para ficarem minimamente não-ofensivas aos olhos em todos os tipos de telas e dispositivos.

Acho que para um caso simples desse não é problema - é até recomendável - utilizar imagens para fazer a parte inclinada das abas.

Apenas faça algo do tipo:

<tag>Item de menu</tag>

Onde tag é o tipo elemento que você achar melhor (div, li etc.)

E preencha os atributos min-width, margin, padding, text-align, background-color e background-image da li ao seu gosto.

Daí você usa uma .gif ou um .png como imagem de fundo alinhada à esquerda do elemento, e dá um fundo da mesma cor.

Você deve fazer log-in para responder a esta pergunta.

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