css только текстурированная и «сшитая» лента

Question

Это сводит меня с ума, я видел его раньше, но не могу его реплицировать или найти или ресурсов для него. То, что я делаю, это вертикальная лента с кожаной текстурой и «сшитым рисунком». Способ работы стежков достаточно прост, внутренние divs с пунктирными границами, и даже форма ленты достаточно проста, используя класс pseudo :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

So , Я хотел убедиться, что я не теряю рассудок и что этот ленточный эффект на самом деле возможен в современных браузерах, не полагаясь на фильтры 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>