Мне нужно создать тег предложения и передать ему значение. если 2, тогда тег должен быть стилями, как показано на рисунке ниже. Любая помощь будет оценена по достоинству. вот скрипка, которую я пробовал до сих пор. Демо но текст не выровнен, а также я передаю награды из div, награды должны присутствовать по умолчанию в теге. ОБНОВЛЕНИЕ Хорошо, не нужно передавать значение, но, по крайней мере, можно создать тег. Я передам значение с помощью jquery. awards 2

div {
    width: 120px;
    margin-top: 150px;
    height: 30px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
<div>2 awards</div>
0
Sudarshan Kalebere 25 Фев 2016 в 09:12

2 ответа

Лучший ответ

Динамический контент, доставляемый CSS из какого-либо ввода? Обычно я бы сказал нет, но теперь это возможно с атрибутом content. Что-то в этом роде:

.item {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.item img {
  display:block;
}
.item.promoted:after {
  content: attr(data-awards) ' Awards';
  position: absolute;
  background: #C55;
  color: white;
  width: 100%;
  line-height: 1em;
  text-align: center;
  padding: 0.5em 0;
  box-sizing: border-box;
  top: 0;
  right: 0;
  transform: rotate(45deg) translate(30%,-25%);
  transform-origin: 50% 50%;
}
<div class="item promoted" data-awards="2">
  <img src="//placehold.it/150" alt="promoted image">
</div>

<div class="item promoted" data-awards="7">
  <img src="//placehold.it/150" alt="promoted image">
</div>

<div class="item promoted" data-awards="5">
  <img src="//placehold.it/150" alt="promoted image">
</div>
2
Joseph Marikle 25 Фев 2016 в 06:33

Может это то, что ты хочешь ..

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin: 10px;
}
span {
  display: block;
  width: 120px;
  height: 24px;
  background-color: orange;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  text-align: center;
  line-height: 24px;
  right: -26px;
  top: 22px;
  font-family: arial;
  font-size: 15px;
}
<div class="container">
  <span>2 Awards</span>
</div>
4
Ralph John Galindo 25 Фев 2016 в 07:03