如何創建非重複的外部邊界圖像？

-1

我想弄清楚如何在截圖中爲單獨的div創建一個邊框圖像，但我似乎無法找到一種方法來做到這一點。任何人都可以提供一些關於如何使這些外部邊界圖像工作的指導？如何創建非重複的外部邊界圖像？

enter image description here

2014-11-24 Emily

你有任何CSS的人可以看看？無法分辨您的問題。你能更具體一點嗎？ – vernak2539 2014-11-24 14:57:34

我刪除了所有無法運行的東西。那麼你看到框右側的邊框，這與div的重疊？我試圖重新創建。 – Emily 2014-11-24 15:03:51

這與我所能得到的儘可能接近。無需圖片：

.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

來源

2014-11-24 15:32:09 Turnip

這太好了，謝謝！ – Emily 2014-11-24 16:32:29

沒問題。如果有幫助，不要忘記標記其中一個答案是正確的 – Turnip 2014-11-24 16:42:17

這裏是我如何做到這一點首先你需要削減這一形象

，然後你可以使用它作爲一個元素之後

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

來源

2014-11-24 15:27:16

如何創建非重複的外部邊界圖像？

回答

相關問題