Centre rotate

by 3axap

HTML

<div class="outer">
    <div class="inner">
        <div class="text">1</div>
    </div>
</div>
<div class="outer">
    <div class="inner">
        <div class="text">1 2</div>
    </div>
</div>

CSS

.outer {

    display: block;
    position: relative;
    border-color: transparent #5bc0de transparent transparent;
    border-style: solid;
    border-width: 0 80px 60px 0;
    height: 0px;
    width: 0px;
    transform: rotate(360deg);    
    
}
.inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
     transform: rotate(360deg);
}
.text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    color: #fff;
    font-size: 18px;
    font-weight: bold; /* Можно вместо иконок написать... Например NEW */
    position: relative;
    right: -25px;
    bottom: 4px;
    white-space: nowrap;
    transform: rotate(35deg);
    
}