css只有纹理和'缝合'功能区

Question

这让我疯了,我以前见过但却无法复制或找到它或任何资源.我正在做的是一个垂直的丝带,皮革纹理和"缝合图案".缝线的工作方式很简单,带有虚线边框的内部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;
}