Как добавить баннер предварительного просмотра на веб-страницу asp.net?

Question

У меня есть требование, но я не понимаю, как объяснить свое требование, поэтому я создаю образ, который даст четкое представление о моем вопросе.

Answer 1

Это называется эффект "лента". Я создал codepen here, в котором показано, как сделать это максимально простым, не загрязняя CSS.

Ваш HTML должен быть простым, как это

<div class="ribbon-wrapper"> 
    <div class="ribbon"> 
    <a href="#">Text you want <i class="fa fa-twitter"></i></a> 
    </div> 
</div> 

Ниже приведен CSS:

.ribbon-wrapper { 
    position: relative; 
    left: -41px; 
    top: 49px; 
    width: 150px; 
    -ms-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    border-color: #a00; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    border-bottom: 30px solid #a00; 
    box-shadow: 0px 6px 5px -5px rgba(0, 0, 0, 0.5); 
    z-index: 999; 
} 
.ribbon-wrapper .ribbon { 
    position: absolute; 
    left: -15px; 
    top: 2px; 
    border-bottom: 1px dotted rgba(255, 255, 255, 0.7); 
    width: 180px; 
    text-align: center; 
} 
.ribbon-wrapper .ribbon a { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: 700; 
    color: #d8d8d8; 
    text-decoration: none; 
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5); 
    text-align: center; 
    line-height: 22px; 
    display: inline-block; 
    border-top: 1px dotted rgba(255, 255, 255, 0.7); 
    transition: color 500ms ease; 
} 
.ribbon-wrapper .ribbon a:hover { 
    color: #fff; 
    text-shadow: 0 1px rgba(0, 0, 0, 0.85); 
}