правый угол ленты на сНу CSS

Question

Привет Я пытаюсь сделать угловую ленту в DIV и его будет везде, где я хочу, чтобы она выглядела опрятно и красиво он идет через DIV и не сидит хорошо

/* The ribbons */ 
 

 
.corner-ribbon { 
 
    width: 100px; 
 
    background: #e43; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: -50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    letter-spacing: 1px; 
 
    color: #f0f0f0; 
 
    transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    overflow: hidden; 
 
} 
 
.corner-ribbon.shadow { 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
} 
 
/* Different positions */ 
 

 
.corner-ribbon.top-right { 
 
    /* top: 18px; */ 
 
    right: -4px; 
 
    left: auto; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(46deg); 
 
    overflow: hidden; 
 
} 
 
.corner-ribbon.blue { 
 
    background: #39d; 
 
}

<div class="large-4 columns"> 
 

 
    <div class="corner-ribbon top-right sticky blue">Hello</div> 
 
</div>

может кто-нибудь сказать мне, как я могу поставить угловую ленту в правом верхнем углу, глядя умный и красивый, который может обрабатывать около 3 слов.

Answer 1

Попробуйте Demo

.corner - ribbon { 
    width: 100 px; 
    background: #e43; 
    position: absolute; 
    text - align: center; 
    line - height: 50 px; 
    letter - spacing: 1 px; 
    color: #f0f0f0; 
    transform: rotate(45 deg); - webkit - transform: rotate(45 deg); 
    overflow: hidden; 
    right: 0; 
    top: 1.7e m; 
} 

.corner - ribbon.shadow { 
    box - shadow: 0 0 3 px rgba(0, 0, 0, .3); 
} 

/* Different positions */ 

.corner - ribbon.blue { 
     background: #39d;} 
.large-4{ 
    position: relative;  
} 

Answer 2

Вы можете попробовать этот код, В HTML,

<div class="large-4 columns top-right"> 
    <div class="corner-ribbon sticky blue">Hello</div> 
</div> 

В CSS

.columns { 
font-size: 16px !important; 
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ 

width: 50%; 

position: relative; 
background: #ba89b6; 
color: #fff; 
text-align: center; 
padding: 1em 2em; /* Adjust to suit */ 
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ 
} 
.columns:before, .columns:after { 
content: ""; 
position: absolute; 
display: block; 
bottom: -1em; 
border: 1.5em solid #986794; 
z-index: -1; 
} 
.columns:before { 
left: -2em; 
border-right-width: 1.5em; 
border-left-color: transparent; 
} 
.columns:after { 
right: -2em; 
border-left-width: 1.5em; 
border-right-color: transparent; 
} 
.columns .corner-ribbon:before, .columns .corner-ribbon:after { 
content: ""; 
position: absolute; 
display: block; 
border-style: solid; 
border-color: #804f7c transparent transparent transparent; 
bottom: -1em; 
} 
.columns .corner-ribbon:before { 
left: 0; 
border-width: 1em 0 0 1em; 
} 
.columns .corner-ribbon:after { 
right: 0; 
border-width: 1em 1em 0 0; 
} 
.columns.top-right { 
    top: 75px; 
    right: -75px; 
    left: auto; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    /* overflow: hidden; */ 
    z-index: 10; 
} 

Для справки, просто пройти через эту хорошую статью https://css-tricks.com/snippets/css/ribbon/

Answer 3

Редактировать: Я постоянно наблюдаю за тем, как люди одобряют мое довольно быстрое и негибкое предложение, но если вы не знаете содержание (длину/размер) ленты, обязательно посмотрите Paulie_D's solution! Его больше размещают, поскольку лента «настраивается», в зависимости от длины текста внутри ленты. Я хотел бы предложить min-width для :before/:after псевдо-элементов, хотя, так что вы получите только очень короткий блок, если содержание просто «новый», например

---

Вы действительно просто ищете лучшее позиционирование?

сделать ленту длиннее и переместите его так, он расположен аккуратно в углу, убедитесь вы даете элемент контейнера overflow: hidden;

https://jsfiddle.net/svArtist/jtwuxhcv/

.corner-ribbon { 
 
    width: 250px; 
 
    background: #e43; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: -50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    letter-spacing: 1px; 
 
    color: #f0f0f0; 
 
    transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    overflow: hidden; 
 
} 
 
.corner-ribbon.shadow { 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .3); 
 
} 
 
/* Different positions */ 
 

 
.corner-ribbon.top-right { 
 
    /* top: 18px; */ 
 
    top:30px; 
 
    right: -70px; 
 
    left: auto; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(46deg); 
 
    overflow: hidden; 
 
} 
 
.corner-ribbon.blue { 
 
    background: #39d; 
 
} 
 

 
.large-4, html{ 
 
    height:100%; 
 
    overflow:hidden; 
 
    width:100%; 
 
} 
 

 
body{ 
 
    margin:0; 
 
    padding:0; 
 
    position:relative; 
 
    width:100%; 
 
}

<div class="large-4 columns"> 
 

 
    <div class="corner-ribbon top-right sticky blue shadow">Hello</div> 
 
</div>

Answer 4

Это не ясно, что это должно выглядеть, но , если это m в углу диапазон при 45 градусах по верхней части div/body, этот параметр является тем, который (пока) не требует особых настроек.

Перемен 'позиция' автоматически изменяется в размер шрифта/дополнения и т.п.

Codepen Demo

.parent { 
 
    overflow: hidden; /* required */ 
 
    width: 50%; /* for demo only */ 
 
    height: 250px /* some non-zero number */; 
 
    margin: 25px auto; /* for demo only */ 
 
    border:1px solid grey; /* for demo only */ 
 
    position: relative; /* required for demo*/ 
 
} 
 

 
.ribbon { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: rebeccapurple; 
 
    color:white; 
 
    padding:1em 0; 
 
    position: absolute; 
 
    top:0; 
 
    right:0; 
 
    transform: translateX(30%) translateY(0%) rotate(45deg); 
 
    transform-origin: top left; 
 
} 
 
.ribbon:before, 
 
.ribbon:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top:0; 
 
    margin: 0 -1px; /* tweak */ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rebeccapurple; 
 
} 
 
.ribbon:before { 
 
    right:100%; 
 
} 
 

 
.ribbon:after { 
 
    left:100%; 
 
}

<div class="parent"> 
 
<h4 class="ribbon">Special Sale Today</h4> 
 
    </div>