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 - 创建3d-ribbon-box-in-css –

Made a fiddle here.虽然没有b标签但解决不了。我用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）在这里包括答案的基本部分，并提供参考链接。 –

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

喜欢的东西：

.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

回答

相关问题