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

Answer 2

所以，我想确保我不会失去理智，而且这种色带效果实际上可以在现代浏览器上实现，而不依赖于webkit特定的过滤器。所以这里适合所有后来遇到此事的人。

您只需要更加努力地模仿box-shadows。

请注意，在增加宽度时，您需要随后减小旋转和倾斜:before和:after元素的角度。

示例：

＆＃13;

.ribbon {
    background: #eee;
    border-left: 1px dashed #aaa;
    border-right: 1px dashed #aaa;
    border-top: 1px dashed #aaa;
    box-shadow: 5px 0 0 #eee,
                -5px 0 0 #eee,
                0 -5px 0 #eee,
                5px -5px 0 #eee,
                -5px -5px 0 #eee,
                5px 1px 5px 5px #888;
    height: 120px;
    margin: 10px 5px 0 5px;
    position: relative;
    width: 90px;
    z-index: 3;
}
.ribbon:after,
.ribbon:before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    width: calc(50% + 1px);
    border-bottom: 1px dashed #aaa;
}
.ribbon:after {
    transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
    transform-origin: top right;
    right: -1px;
    height: 40px;
    background-color: #eee;
    border-right: 1px dashed #aaa;
    box-shadow: 5px 0 0 #eee,
                0 5px 0 #eee,
                5px 5px 0 #eee,
                15px 15px 5px -5px #888,
                0 15px 5px -5px #888,
                15px 0 5px -5px #888;
}
.ribbon:before {
    transform: rotateZ(-20deg) skewX(-20deg);
    transform-origin: top left;
    left: -1px;
    height: 40px;
    background-color: #eee;
    border-left: 1px dashed #aaa;
    box-shadow: -5px 0 0 #eee,
                0 5px 0 #eee,
                5px 5px 0 #eee,
                15px 15px 5px -5px #888,
                0 15px 5px -5px #888;
}

＆＃13;

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

＆＃13;

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

2 个答案: