2

Estou precisando fazer este tipo de efeito com css será que tem como ?

inserir a descrição da imagem aqui

Não teria importância utilizar css3 nem nenhum tecnologia, este tipo de css será usado em um aplicativo feito em ionic, não sei se isto importaria algo.

Preciso a reprodução identica a este, contendo um ícone e um texto dentro.

Tentei utilizar border-radius e rotate porem ele rodou todo conteúdo da div.

.triangle {
  height: 50px;
  width: 50px;
  background-color: red;
  border-radius: 5px;
  transform: rotate(50deg);
}


<ion-row>
  <ion-col col-4>
    <div class="triangle">
      <ion-icon name="md-book" class=""></ion-icon>
     <span>Algum texto</span>
    </div>
  </ion-col>
</ion-row>
5
  • Já cogitou aplicar border-radius e transform: rotate() em uma div?
    – Woss
    7/11/2017 às 0:40
  • não, como ficaria ? 7/11/2017 às 0:43
  • Até tentei aqui porém ele virou o conteúdo da div juntamente. 7/11/2017 às 0:48
  • Dá para fazer com rotate:(-50deg) no span e com posicionamento absoluto no span e relativo no .triangle. E para ficar inclinado no angulo certo seriam 45deg
    – Isac
    7/11/2017 às 1:01
  • @Isac poderia cria uma resposta para dar o exemplo ? 7/11/2017 às 1:01

2 Respostas 2

2

Uma solução é criar um pseudo-elemento e fazer a rotação nele, assim o elemento em sí não irá girar também:

html, body{ background: #000; color: #fff; }

.triangle {
    position: relative;
    margin-top: 25px;
    margin-left: 25px;
    display: flex;
    width: 80px;
    height: 80px;
    justify-content:center;
    text-align:center;
    flex-direction:column;
}
.triangle::before{
    display:block;
    content: "";
    width:80px;
    height:80px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid orange;
    border-radius: 10px; /* altere este valor para controlar a curvatura das pontas */
    -webkit-transform: rotate(45deg);
    -webkit-transition: border-color 0.3s;
}
<ion-row>
  <ion-col col-4>
    <div class="triangle">
      <ion-icon name="md-book" class=""></ion-icon>
         <span>Algum texto</span>
    </div>
  </ion-col>
</ion-row>

2

Uma forma de fazer o que pretende é aplicar a rotação inversa no elemento filho (o <span>), e colocar o seu posicionamento como absoluto, e o do pai como relativo.

Segue exemplo:

.triangle {
  margin:50px;
  height: 60px;
  width: 60px;
  border-radius: 5px;
  border:2px solid orange;
  transform: rotate(45deg); /*45 para ter a inclinação certa*/
  position:relative; /*<---*/
}

.triangle span { 
  position:absolute; /*<---*/
  transform: rotate(-45deg); /*<---*/
}
<ion-row>
  <ion-col col-4>
    <div class="triangle">
      <ion-icon name="md-book" class=""></ion-icon>
      <span>Algum texto</span>
    </div>
  </ion-col>
</ion-row>

Alterei ligeiramente outros estilos para ser mais fácil de ver e ficar também mais perto da figura que tem na pergunta.

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 .