css自定義邊框樣式（三角形或箭頭）

Question

如何爲CSS邊框樣式創建以下抽象圖案。

/\ /\ 
/\/\ 
--------- 
     |\ 
     | \ 
     |/
     |/ 
     |\ 
     | \ 
     |/
     |/ 
     |\ 
     | \ 
     |/
     |/ 

PS：我無法添加圖片

Answer 1

要獲得多個「三角形」圍繞一個單一的元素，你有你的例子表明，我認爲你唯一的選擇是border-image財產

JSFiddle Demo

CSS

div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width:250px; 
    height:300px; 
    margin:25px; 
    border-style: solid; 
    border-width: 13px 14px 14px 12px; 
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round; 
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round; 
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round; 
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round; 
} 

注意：這個屬性需要你有一個「基礎」圖像工作。

W3C

CanIUse.com

Answer 2

嗯，有這個沒有預定義的CSS規則，但你仍然可以做到這一點。

這裏，看到這個fiddle

<div class="wrapper"> 
<div class="arrow_box"> 
    <div> 
<div class="arrow_box_2"> 
    <div> 
<div class="arrow_box_3"> 
    <div> 

CSS：

.wrapper{ 
    width:500px; 
    height:500px; 
    position:relative; 
} 
.arrow_box { 
    position: absolute; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
    height:100px; 
    width:40px; 
    top:50px; 
    left:50px; 
} 
.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 20px; 
    margin-left: -20px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 26px; 
    margin-left: -26px; 
} 

.arrow_box_2 { 
    position: absolute; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
    border-left:none; 
    height:100px; 
    width:50px; 
    top:-4px; 
    left:30px; 

} 
.arrow_box_2:after, .arrow_box_2:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box_2:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 20px; 
    margin-left: -20px; 
} 
.arrow_box_2:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 26px; 
    margin-left: -26px; 
} 
.arrow_box_3 { 
    position: absolute; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
    border-left:none; 
    height:100px; 
    width:45px; 
    top:-4px; 
    left:45px; 

} 
.arrow_box_3:after, .arrow_box_3:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box_3:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 20px; 
    margin-left: -20px; 
} 
.arrow_box_3:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 26px; 
    margin-left: -26px; 
} 

您的問題已downvoted因爲你似乎沒有人研究。請記住，GIYF。

這裏有一個工具來幫助你瞭解它是如何做 - http://cssarrowplease.com