CSS丝带右侧内箭头(CSS ribbon with inside arrow on the rig

我想创建这样的图像（图像的红色部分）上的丝带效果：

当我尝试创建边框箭头效果，物体的形状完全被破坏：

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

任何想法我如何创造的？

Answer 1:

制作小提琴这里。 没有AB标签没能解决它虽然。 我用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;}

Answer 2:

你也可以使用一个倾斜的元素，如果这是需要命中测试也是如此。

就像是：

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

文章来源: CSS ribbon with inside arrow on the right