CSS лента с внутренней стрелкой на правой

Я хочу, чтобы создать эффект ленты, как на этом изображении (красная часть изображения): ribbon example CSS лента с внутренней стрелкой на правой

Когда я пытаюсь создать эффект стрелки с границами, формой объект полностью разрушен:

HTML код:

<a href="#" class="mali_oglas_kategorija">Kategorija</a>

код CSS до сих пор (не пытаясь создать стрелку):

.mali_oglas_kategorija {   
     position: relative; 
     display: inline-block; 
    font-weight: bold; 
     width: 100px;   
    padding: 6px 20px 6px 40px; 
    margin: 10px 10px 10px -18px; 
     color: #e5e5e5 !important; 
    background-color: #760000; 
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5); 
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5); 
    box-shadow: 0px 2px 4px rgba(0,0,0,.5);}  
.mali_oglas_kategorija:after{ 
     content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 0px; 
    top: 100%; 
    border-width: 5px 10px; 
    border-style: solid; 
    border-color: #470000 #470000 transparent transparent; 
}

Любая идея, как я могу создать это?

источник

2012-05-22 Sasha

Ну с какой страницы это? Вы можете найти код HTML и таблицы стилей (если это не изображение) и написать что-то подобное. –

Это изображение отправлено мне дизайнером (он не знает кода), и мне нужно как-то создать это: D – Sasha

@Sasha, пожалуйста, проверьте это: http://stackoverflow.com/questions/10409248/how -to-create-3d-ribbon-box-in-css –

Made a fiddle here. Не удалось решить проблему без тега b. Я б, потому что он настолько мал

HTML

<a href="#" class="mali_oglas_kategorija">Kategorija<b></b></a>

CSS

.mali_oglas_kategorija {   
    position: relative; 
    display: inline-block; 
    font-weight: bold; 
    width: 100px;   
    padding: 6px 20px 6px 40px; 
    margin: 10px 10px 10px -18px; 
    color: #e5e5e5 !important; 
    background-color: #760000; 
    -webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5); 
    -moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5); 
    box-shadow: 3px 2px 4px rgba(0,0,0,.5);}  
.mali_oglas_kategorija:before{ 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 0px; 
    top: 100%; 
    border-width: 5px 10px; 
    border-style: solid; 
    border-color: #470000 #470000 transparent transparent; 
} 

.mali_oglas_kategorija:after{ 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    right: -10px; 
    top: 0; 
    border-width: 10px 5px; 
    border-style: solid; 
    border-color: #760000 transparent transparent #760000 ; 
} 
.mali_oglas_kategorija b { 
    position: absolute; 
    width: 0; 
    height: 0; 
    right: -10px; 
    bottom: 0; 
    border-width: 10px 5px; 
    border-style: solid; 
    border-color: transparent transparent #760000 #760000 ; 
} 


body { padding: 50px;}

источник

2012-05-30 11:16:59

Хотя это теоретически может ответить на вопрос, [было бы предпочтительнее] (http: //meta.stackexchange. com/q/8259), чтобы включить здесь основные части ответа и предоставить ссылку для справки. –

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

Что-то вроде:

.rib { 
 
    margin-left: 20px; 
 
    height: 40px; 
 
    width: 200px; 
 
    position: relative; 
 
    background: gray; 
 
    color: white; 
 
    line-height: 40px; 
 
    text-align: center; 
 
} 
 
.rib:before, 
 
.rib:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 0; 
 
    height: 50%; 
 
    width: 40px; 
 
    background: inherit; 
 
} 
 
.rib:before { 
 
    transform: skewX(-45deg); 
 
} 
 
.rib:after { 
 
    transform: skewX(45deg); 
 
    top: 50%; 
 
} 
 
.shad { 
 
    position: absolute; 
 
    height: 40px; 
 
    width: 20px; 
 
    top: 0%; 
 
    left: 0; 
 
    background: dimgray; 
 
    transform-origin: top left; 
 
    transform: skewY(45deg); 
 
    z-index: -1; 
 
    box-shadow:inset 0 0 10px black; 
 
}

<div class="rib">123 
 
    <div class="shad"> 
 
    </div> 
 
</div>

источник

2015-05-06 10:43:37 jbutler483

CSS лента с внутренней стрелкой на правой

ответ

Смежные вопросы