Perforated style border in CSS with dynamic background

Question

I'm creating a preview of a coupon (Apple passbook style). To make it "feel" like a real coupon, I want the top and bottom borders to have a perforated style (little triangles). Like this:

enter image description here

I tried to use a little triangle image as background-image repeated all along the border, but that solution can't work all the time. The page background can be dynamic and then the triangle image can't have a color that is fine with all the possible backgrounds.

Is there any CSS way to create a border like this?

Does it have to be triangles? Using `border-style` you can add a dotted or dashed border easily... https://developer.mozilla.org/en-US/docs/Web/CSS/border-style — Dryden Long, Dec 23 '13 at 17:16

score 0 · Answer 1 · edited May 23 '17 at 10:26

The following pages may help you:

Source for the below code : Making jagged triangle border in CSS

Code

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

For tutorial(CSS tricks) visit: http://css-tricks.com/snippets/css/css-triangle/

This could be a good comment... try to improve your answer talking about the code you suggest and some example that you made. NOT only a link-answer — DaniP, Dec 23 '13 at 17:27

score 0 · Answer 2 · answered Dec 23 '13 at 17:20

0

Try using after/before in absolute position with png transparent bg.

answered Dec 23 '13 at 17:20

Luca

66
2

sid · Answer 3 · 2013-12-23T17:30:41.567

0

Assuming you want only basic perforated border you can use

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

edited Dec 23 '13 at 17:30

answered Dec 23 '13 at 17:24

sid

163
1
9

score 0 · Accepted Answer · answered Jan 20 '14 at 16:48

Thanks for all the answers.

I only achieved what I wanted in a "not so good way". I used many bootstrap triangle icons, all lined up and close together (using CSS). This way, I can color the triangles (the perforated border) with the color of the coupon, and the background will still be visible between them.

dinesh ranawat · Answer 5 · 2015-06-26T11:09:05.300

You can do so using radial gradient and background-size. You can also use linear gradient for perfect triangles...

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

Below is the code -

<!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>

Perforated style border in CSS with dynamic background

5 Answers5