html - css 只有纹理和 'stitched' 丝带

Question

这让我抓狂，我以前见过它，但无法复制或找到它或它的任何资源。我正在做的是一 strip 有皮革质地和“缝合图案”的垂直丝带。缝线的工作方式很简单，内部 div 带有虚线边框，甚至丝带形状也很容易使用伪 :after 类，但将两者结合起来并不打算。

这是目前为止我所拥有的 css 的工作原理(所有这些都是用 css 减去皮革纹理完成的):

.wrapleather {
        width:100px;
        height:120px;
	    float: right;
	    margin-right:20px;
        background-image : url("leather.png");
        border-radius: 5px;
        -webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
        box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
	    position:relative;
    }
    .wrapleather:after {
    	content: '';
        display: block;
        width: 0;
        height: 105px;
        position: absolute;
        top: 0;
        left: 0;
        border-width: 0 50px 15px 50px;
        border-style: solid;
        border-color: transparent transparent #cdc0a8;
	    position:absolute;
    	top:0;
    	left:0;
    }
    .wrapleather .outside {
    	width:90px;
    	height:110px;
        margin: 4px;
        border-radius: 5px;
        border: 1px dashed #aaa;
        box-shadow: 0 0 0 1px #f5f5f5;
    	}
    .wrapleather .inside {
        width:90px;
        height:110px;
        border-radius: 5px;
     }

<div class="wrapleather">
     <div class="outside">
       <div class="inside">
        <p class="font">Leather</p>
       </div>
     </div>    
  </div>

此外，阴影仍保持“正方形”格式，并没有呈现所有形状。为了澄清我不是要求任何人调试或类似的东西，我只是要求共享可以达到预期结果的替代或进一步方法，css 仍然是我正在学习的东西所以任何建议或任何东西我们将不胜感激，如果您需要任何其他信息，请告诉我。谢谢!

Answer 1

有一种方法可以只用 CSS 做你想做的事，但它不适用于所有浏览器。如果您想要最好的浏览器支持，您可能应该使用图像。

这是一个演示(您可能已经注意到我只使用了一个元素，因为您不应该仅仅为了样式而引入额外的标记):http://jsfiddle.net/joshnh/eUje5/

HTML

<div class="ribbon"></div>

CSS

.ribbon {
    background: #eee;
    border-left: 1px dashed #aaa;
    border-right: 1px dashed #aaa;
    border-radius: 5px 5px 0 0;
    box-shadow: 5px 0 0 #eee,
                -5px 0 0 #eee;
    height: 120px;
    margin: 0 5px;
    position: relative;
    width: 90px;
    -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
    border-top: 15px solid #eee;
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.ribbon:after {
    border-left: 50px solid transparent;
    right: -6px;
}
.ribbon:before {
    border-right: 50px solid transparent;
    left: -6px;
}