Triangle cast with css

Question

Triangle cast with css

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I need to make this kind of effect with css what do you have?

Itwouldnotmattertousecss3oranytechnology,thistypeofcsswillbeusedinanapplicationmadeinionic,Idonotknowifthiswouldmatter.

Ineedtheidenticalreproduction,containinganiconandatextinside.

Itriedtouseborder-radiusandrotatebutitranallcontentsofdiv.

.triangle{height:50px;width:50px;background-color:red;border-radius:5px;transform:rotate(50deg);}<ion-row><ion-colcol-4><divclass="triangle">
      <ion-icon name="md-book" class=""></ion-icon>
     <span>Algum texto</span>
    </div>
  </ion-col>
</ion-row>

css css3

asked by anonymous 07.11.2017 / 01:38

2 answers

2

One way to do what you want is to apply the inverse rotation on the child element ( <span> ), and put its positioning as absolute, and the parent's relative.

Here's an 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 get closer to the picture you have in the question.

07.11.2017 / 02:05

PHP: How to convert a number into a string? [duplicate] Disable checkbox unchecked javascript

score 2 · Accepted Answer

One solution is to create a pseudo-element and spin 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>