Napis w trójkącie - CSS

Question

Cześć, od jakiegoś czasu głowię się nad rozwiązaniem problemu stworzenia trójkąta który w środku będzie miał wycentrowany napis. Próbowałem to ugryźć na 2 sposoby jednak żaden nie okazał się działający.

Sposób 1:

<!-- 
 - CSS3 Shapes – podstawowe kształty i figury za pomocą CSS3
 - http://danielpietrasik.pl/css3-podstawowe-ksztalty/ 
-->

<div class="triangle">
  <span>
  Sprzedane
  </span>
</div>

/**
 * CSS3 Shapes – podstawowe kształty i figury za pomocą CSS3
 * http://danielpietrasik.pl/css3-podstawowe-ksztalty/ 
 **/

.triangle {
	width: 0;
	height: 0;
	border-top: 121px solid #F34A53;
	border-left: 121px solid transparent;
}

.triangle span {
  position: absolute;
 
  left:00px;

  -webkit-transform: rotate(45deg) translate(0, -25%);
  -moz-transform: rotate(45deg) translate(0, -25%);
  -ms-transform: rotate(45deg) translate(0, -25%);
  -o-transform: rotate(45deg) translate(0, -25%);
  transform: rotate(45deg) translate(0, -25%);
}
.triangle span {
  line-height:100px;
  text-align: center;
  display: block;
  border: 1px solid green;

}
.triangle span {
  height:120px;
  width:120px;
  border: 1px solid blue;
  display:table-cell;
        vertical-align:middle;
        text-align:center;
          -webkit-transform: rotate(45deg) translate(0, -25%);
  -moz-transform: rotate(45deg) translate(0, -25%);
  -ms-transform: rotate(45deg) translate(0, -25%);
  -o-transform: rotate(45deg) translate(0, -25%);
  transform: rotate(45deg) translate(0, -25%);
  margin: 0px;
}

Sposób 2:

<!-- 
 - CSS3 Shapes – podstawowe kształty i figury za pomocą CSS3
 - http://danielpietrasik.pl/css3-podstawowe-ksztalty/ 
-->

<div class="triangle">
<span>Test</span>
</div>

/**
 * CSS3 Shapes – podstawowe kształty i figury za pomocą CSS3
 * http://danielpietrasik.pl/css3-podstawowe-ksztalty/ 
 **/

.triangle {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 100px solid #F34A53;

  -webkit-transform: rotate(45deg) translate(0, -25%);
  -moz-transform: rotate(45deg) translate(0, -25%);
  -ms-transform: rotate(45deg) translate(0, -25%);
  -o-transform: rotate(45deg) translate(0, -25%);
  transform: rotate(45deg) translate(0, -25%);
}
.triangle span {
  line-height: 100px;
  text-align: center;
}

 

Answer 1

Nie wiem czy jest to poprawne rozwiazanie takich problemow ale zawsze mozna przygotowac sobie statyczna grafike, jesli tekst nie zmienia sie dynamicznie.

Comments

Było by to dobre rozwiązanie ale nie w moim przypadku. Chciałbym dać użytkownikowi możliwość zmiany na dowolny kolor.

Answer 2

Tekst ma być w trójkącie X. Wtedy w środku tego trójkąta X musi być wpisany prostokąt A dla tekstu, który będzie definiował wielkość prostokąta A. Zostaje policzyć pozycje dla krawędzi trójkąta X i wpisać ten trójkąt X w prostokąt B, który będzie ograniczał cały blok z zewnątrz. Do wykonania tego zadania możesz użyć JavaScript. CSS chyba nie potrafi wykonywać, aż tak skomplikowanych zadań. Podkreślam CHYBA.

Answer 3

To może zmiana koncepcji na gradient?

<div>
  <span>napis dddd</span>
</div>

div {
      display: table;
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, 
                  rgba(0,0,0,0) 0%, 
                  rgba(0,0,0,0) 50%, 
                  rgba(246,41,12,1) 51%, 
                  rgba(240,47,23,1) 71%, 
                  rgba(231,56,39,1) 100%
      );
}
div span {
      display:table-cell;
      vertical-align:middle;
      text-align: center;
      -webkit-transform: rotate(45deg) translate(0, -25%);
      -moz-transform: rotate(45deg) translate(0, -25%);
      -ms-transform: rotate(45deg) translate(0, -25%);
      -o-transform: rotate(45deg) translate(0, -25%);
      transform: rotate(45deg) translate(0, -25%);
}

test

Comments

Całość się rozjeżdża dla testu napisu: napis ddkhkmhbmnbhbkhbddfdgdg gd dggd

---

W garnku o pojemności 5cm^3 nie włożysz garnka o pojemności 10cm^3.

---

To ma być dynamiczny garnek 

Answer 4

<div class="badge">
</div>
<div class="maska-t">
	<strong>Sale!</strong>
</div>

.badge {
    position: absolute;
    right: 0;
    top: 0;
	border-top: 90px solid #CC0000;
	border-left: 90px solid transparent;
}
.maska-t {
    color: #fff;
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0px;
    top: 0px;

}

Może komuś się przyda :)!