帶有動態背景的CSS中的穿孔樣式邊框

我正在創建優惠券（Apple存摺樣式）的預覽。爲了讓它「感覺」像一張真正的優惠券，我希望頂部和底部邊框具有穿孔樣式（小三角形）。就像這樣：帶有動態背景的CSS中的穿孔樣式邊框

enter image description here

我試圖用一個小三角形圖像作爲背景圖像重複所有沿邊，但這種解決方案不能工作的所有時間。頁面背景可以是動態的，然後在所有可能的背景下，三角形圖像的顏色都不會很好。

有沒有任何CSS方式來創建這樣的邊框？

來源

2013-12-23 JPHorta

是否必須是三角形？使用'border-style'你可以很容易地添加一個虛線或虛線的邊框... https://developer.mozilla.org/en-US/docs/Web/CSS/border-style –

感謝所有的答案。

我只以「不太好的方式」實現了我想要的。我使用了許多引導程序三角形圖標，全部排列在一起（使用CSS）。這樣，我可以使用優惠券的顏色對三角形（穿孔邊框）着色，並且背景在它們之間仍然可見。

來源

2014-01-20 16:48:48 JPHorta

以下頁面可以幫助你：

來源爲下面的代碼：Making jagged triangle border in CSS

代碼

HTML：

<div class="header"><h1>This is a header</h1></div>

CSS：

.header{ 
color:white; 
background-color:#2B3A48; 
text-align:center; 
} 
.header:after { 
content: " "; 
    display:block; 
    position: relative; 
top:0px;left:0px; 
    width:100%; 
    height:36px; 
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; 
    background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; 
    background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; 
    background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; 
    background-repeat: repeat-x; 
    background-size: 0px 100%, 9px 27px, 9px 27px; 
    }

對於教程（CSS技巧），請訪問：http://css-tricks.com/snippets/css/css-triangle/

來源

2013-12-23 17:19:45 Zword

這可能是一個很好的評論..嘗試改善你的回答，討論你建議的代碼和你做的一些例子。不只是一個鏈接 - 答案 – DaniP

好吧@ Danko.I將更新我的答案 – Zword

嘗試與PNG透明BG絕對位置使用/前之後。

來源

2013-12-23 17:20:16 Luca

假設你只想要基本孔邊框可以使用

.class{ 
    border:1px dotted #red; 
}

來源

2013-12-23 17:24:24 sid

您可以使用徑向漸變和背景大小。您還可以使用線性漸變完美的三角形...

http://jsfiddle.net/dineshranawat/Ls95n95L/

下面是代碼 -

<!DOCTYPE html><html lang="en-US"><head><title>Perforated Border</title> 
<style> 
#testDiv:before, #testDiv:after { 
    content: ''; 
    display: block; 
    height: 75px; width: 170px; 

    background: RGB(255,75,0) radial-gradient(ellipse at 4px 8px, RGB(255,146,73) 4px, RGB(255,75,0) 4px) repeat-x; 
    background-size: 8px 8px; 

    position: absolute; 
} 

#testDiv:before { 
    top: 0px; 
    background-position: bottom; 
} 

#testDiv:after { 
    bottom: 193px; 
    background-image: radial-gradient(ellipse at 4px 0px, RGB(255,146,73) 4px, RGB(255,75,0) 4px); 
} 

#testDiv { 
    margin-top: 75px; 
    height: 300px; width: 170px; 
    background-color: RGB(255,146,73); 
} 
</style> 

</head> 
<body> 
<div id='testDiv'> </div> 
</body> 
</html>

來源

2015-06-18 14:34:50 user2276779

帶有動態背景的CSS中的穿孔樣式邊框

回答

相關問題