2

这让我发疯，我以前见过它，但无法复制或找到它或任何资源。我正在做的是一条带有皮革纹理和“缝合图案”的垂直丝带。缝合的工作方式很简单，带有虚线边框的内部 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仍然是我正在学习的东西，所以任何建议或任何东西您可以给予的那种性质将不胜感激，如果您需要任何其他信息，请告诉我。谢谢！

4

2 回答 2

7

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

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

HTML

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

​</p> 

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;
}
于 2012-08-29T05:36:24.557 回答
0

所以，我想确保我没有失去理智，并且这种功能区效果实际上在现代浏览器上是可能的，而不依赖于 webkit 特定的过滤器。所以这里是为所有后来遇到这个的人准备的。

您只需要更加努力地为您的box-shadows.

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

例子：

.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;
}
<div class="ribbon"></div>

于 2015-03-05T16:11:37.567 回答