CSS只紋理和「拼接」絲帶

Question

這是我發瘋，我以前見過它，但不能複製，或找到它或它的任何資源。我正在做的是帶有皮革紋理和「縫合圖案」的垂直色帶。拆線工作的方式是很簡單的，用虛線邊框內的div，甚至帶狀是很容易的使用僞:after類，但兩者結合只是不打算打算。

這是我對CSS是工作，所以到目前爲止（這是所有的CSS減去皮革質地完成）：

.wrapleather { 
 
     width:100px; 
 
     height:120px; 
 
\t  float: right; 
 
\t  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); 
 
\t  position:relative; 
 
    } 
 
    .wrapleather:after { 
 
    \t 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; 
 
\t  position:absolute; 
 
    \t top:0; 
 
    \t left:0; 
 
    } 
 
    .wrapleather .outside { 
 
    \t width:90px; 
 
    \t height:110px; 
 
     margin: 4px; 
 
     border-radius: 5px; 
 
     border: 1px dashed #aaa; 
 
     box-shadow: 0 0 0 1px #f5f5f5; 
 
    \t } 
 
    .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元素。

例子：

.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>