Question

我正在创建优惠券预览（Apple存折风格）。为了让它“感觉”像真正的优惠券，我希望顶部和底部边框有穿孔样式（小三角形）。像这样：

enter image description here

我试图使用一个小三角形图像作为沿边界重复的背景图像，但该解决方案不能一直工作。页面背景可以是动态的，然后三角形图像不能具有所有可能背景的颜色。

有没有CSS方法来创建这样的边框？

Answer 1

以下页面可以为您提供帮助：

以下代码的来源：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/

Answer 2

尝试使用png transparent bg在绝对位置使用after / before。

Answer 3

假设您只想要基本的穿孔边框，可以使用

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

Answer 4

感谢所有答案。

我只是以“不那么好的方式”实现了我想要的东西。我使用了许多引导三角形图标，所有这些图标都排成一列并靠近（使用CSS）。这样，我可以使用优惠券的颜色为三角形（穿孔边框）着色，并且它们之间仍然可以看到背景。

Answer 5

您可以使用径向渐变和背景大小来完成此操作。你也可以使用线性渐变来表示完美的三角形...

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>

在CSS的穿孔样式边界与动态背景

5 个答案: