Как создать не повторяющееся изображение внешней границы?

Question

Я пытаюсь понять, как создать изображение границы для отдельных divs на скриншоте, но я не могу найти способ сделать это. Может ли кто-нибудь предложить некоторые рекомендации о том, как заставить эти внешние пограничные изображения работать?

Answer 1

Это примерно так же близко, как я могу это получить. Не требуется никаких изображений:

.has_tab { 
 
    border: 1px solid #e6e6e6; 
 
    border-left: none; 
 
    width: 33.33%; 
 
    height: 300px; 
 
    box-sizing: border-box; 
 
    display: block; 
 
    float: left; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.has_tab:first-child { 
 
    border-left: 1px solid #e6e6e6; 
 
} 
 

 
/* the important bit... */ 
 
.has_tab:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 10px; 
 
    height: 100px; 
 
    background: #FFF; 
 
    border: 1px solid #e6e6e6; 
 
    border-left: none; 
 
    border-radius: 0 20px 20px 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -50px; 
 
    right: -11px; 
 
} 
 

 
.has_tab:last-of-type:after { 
 
    display: none; 
 
}

<div class="has_tab">Lorem ipsum</div> 
 
<div class="has_tab">Lorem ipsum</div> 
 
<div class="has_tab">Lorem ipsum</div>

Fiddle version

Answer 2

вот как я это сделать сначала вам нужно вырезать это изображение

, а затем вы можете использовать его в качестве фона после элемента

<div class="borderd-div"></div> 

и CSS:

.borderd-div{ 
height: 334px; 
width:334px; 
border: 1px solid #f1f1f1; 
position: relative; 
} 
.borderd-div:after{ 
content:" "; 
display: block; 
    position: absolute; 
    width: 20px; 
    height: 145px; 
right:-19px; 
    top:83px; 
    background: url(Djyods1.png) no-repeat 0 0; 
    }