CSS丝带与里面箭头在右边 [英] CSS ribbon with inside arrow on the right

问题描述

我想创建一个像这个图像（图像的红色部分）的功能：

I want to create a ribbon effect like on this image (the red part of image):

当我尝试用边框创建一个箭头效果时，对象的形状完全被破坏：

When I try to create an arrow effect with borders, the shape of object is completely destroyed:

HTML代码：

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

到目前为止的CSS代码（不尝试创建箭头）：

CSS code so far (without trying to create the arrow):

.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;
}

任何想法如何创建？

推荐答案

这里做一个小提琴 Couldn' t解决它没有ab标签。我使用b，因为它太小了

Made a fiddle here. Couldn't solve it without a b tag though. I used b because it is so small

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;}

这篇关于CSS丝带与里面箭头在右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！