5

Não soube um título melhor para descrever minha necessidade, mas na verdade, eu gostaria de conseguir fazer uma sequência de caixas cuja borda da direita estivesse num formato triangular, sobreposta à caixa subsequente.

Assim:

Caixas sobrepondo a outra no formato de setas/triangulo

A minha ideia é colocar um texto centralizado em cada um dos itens indicados por cores diferentes acima, numa espécie de régua para status.

Qual seria a forma mais eficiente de fazer isso com CSS?

1
  • 1
    Vou fazer no Codepen de um jeito que eu faria. Commented 1/11/2018 às 13:39

2 Respostas 2

9

Um dos jeitos tradicionais é usar o "border triangle":

.breadcrumb {
  display:inline-block;
  position:relative;
  line-height:30px;                /* altura final da linha */
  text-align:center;
  padding-right:20px;
  padding-left:35px;               /* 1/2 da altura da linha a mais */
                                   /* que o right para compensar o bico */
  color:#fff;
}
.breadcrumb:after {
  content:"";display:block;position:absolute;
  box-sizing:border-box;           /* para respeitar medida interna */
  top:0;bottom:0;left:100%;
  border:solid 15px transparent;   /* metade da altura da linha */
  z-index:1;
}

.blue {background:blue}  .blue:after {border-left-color:blue}
.gold {background:gold}  .gold:after {border-left-color:gold}
.green{background:green} .green:after{border-left-color:green}
.red  {background:red}   .red:after  {border-left-color:red}
   <span class="breadcrumb blue">UM</span><!--
--><span class="breadcrumb gold">DOIS</span><!--
--><span class="breadcrumb green">TRÊS</span><!--
--><span class="breadcrumb red">QUATRO</span>

Esta é apenas uma demonstração da técnica, o importante a se observar é o uso do pseudoelemento, e do border.

No caso, usei <span> para simplificar (por isso os comments para matar quebra de linha), você tem que escolher o display mais adequado para o seu caso. Sobre o espaçamento dos elementos, tem esse post aqui:

Remover espaço entre item de lista html

9
  • 2
    @DiegoSouza eu acho o font size mais gambi do que os comments, mas grato pela dica de qq forma. É que o foco aqui era o bico, na verdade eu acho que nem seria o caso de usar span. Procurei usar o minimo de elementos possível para mostrar que a técnica independe de um container externo. Eu não gosto de font:0 pq apesar dele esconder o espaço, o nó do elemento fica no DOM, e o comment não.
    – Largato
    Commented 1/11/2018 às 13:47
  • 2
    @DiegoSouza eu lembrava desse post, linkei pela referência e tb para fazer graça com o lance do seu HTML comment :D Saiu bastante conversa sobre essas técnicas na época, por isso eu sabia que tinha post
    – Largato
    Commented 1/11/2018 às 13:55
  • 3
    Eu acho legal essas coisas de CSS, desafios. O PT StackOverflow poderia criar uma área de desafios. Onde um usuário poderia criar uma competição para realizar determinada situação no CSS. Fazer uma carta de baralho, por exemplo. O mais legal, o vencedor, ganharia 100 pontos. Estou viajando aqui... mas engajaria a comunidade e serviria de aprendizado para várias técnicas de CSS, HTML Commented 1/11/2018 às 13:58
  • 2
    Pra ser honesto, eu usaria display: inline-flex ou display: flex pra organizar os itens aí dentro. Commented 1/11/2018 às 19:18
  • 1
    Quando eu voltar do mato vou fazer um resposta com linear gradiente :D
    – hugocsl
    Commented 1/11/2018 às 20:16
5

.wrapper {
  margin-top: 30px;
}

ul.menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}
ul.menu li {
  width: 200px;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  font-family: "Roboto";
  font-weight: bolder;
  color: #000;
  text-shadow: #fff 1px 1px 5px;
  position: relative;
}
ul.menu li:after {
  position: absolute;
  content: "";
  right: -12px;
  top: 0;
  bottom: 0;
  height: 25px;
  width: 24px;
  background-color: #000;
  margin: auto;
  transform: rotate(45deg);
  z-index: 1;
}
ul.menu li:first-child {
  background-color: #b4be35;
}
ul.menu li:first-child:after {
  background-color: #b4be35;
}
ul.menu li:nth-child(2) {
  background-color: #ff00ff;
}
ul.menu li:nth-child(2):after {
  background-color: #ff00ff;
}
ul.menu li:nth-child(3) {
  background-color: #ff0000;
}
ul.menu li:nth-child(3):after {
  background-color: #ff0000;
}
ul.menu li:last-child {
  background-color: #00ffff;
}
ul.menu li:last-child:after {
  background-color: #00ffff;
}
<div class="wrapper">
  <ul class="menu">
    <li>Link---1</li>
    <li>Link---2</li>
    <li>Link---3</li>
    <li>Link---4</li>
  </ul>
</div>

3
  • 3
    +1, boa tambem, rotacionar um quadrado é bem legal. Vale dizer que a relação entre a altura dos dois elementos é de 1,4142 (raiz de 2, é a diagonal do quadrado) para que fiquem iguais, para quem for calcular para outras medidas.
    – Largato
    Commented 1/11/2018 às 13:53
  • Eu fiz com SCSS. No Codepen fica mais elegante. Commented 1/11/2018 às 13:54
  • 1
    +1, foi ninja dus CSS Commented 1/11/2018 às 14:41

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 .