Leaked triangle with css

Asked

Viewed 443 times

2

I’m needing to do this kind of effect with css will have as ?

inserir a descrição da imagem aqui

It wouldn’t matter to use css3 or any technology, this kind of css will be used in an application ionic, I don’t know if this would matter anything.

I need the reproduction identical to this, containing an icon and text inside.

I tried to use border-radius and rotate but it spun all the contents of 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>
css css3

  • Have you considered applying border-radius and transform: rotate() in a div?

  • no, how would it look ?

  • I even tried here but he turned the contents of the div together.

  • You can do with rotate:(-50deg) in the span and with positioning absoluto in the span and concerning in .triangle. And to be inclined at the right angle would be 45deg

  • @Isac could create an answer to give the example ?

2 answers

2

One way to do what you want is to apply the inverse rotation on the child element (the <span>), and place their position as absolute, and that of the father as relative.

Following example:

.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>

I slightly changed other styles to be easier to see and also to be closer to the figure you have in the question.

2


One solution is to create a pseudo-element and rotate it, so the element itself will not rotate either:

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>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.