用CSS制作锯齿状三角形边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (265)

在Photoshop中,我有一个边缘形状:

是否可以将重复的三角形作为CSS的边框?

提问于
用户回答回答于

可以使用CSS 3渐变创建一个锯齿形图案背景,使用afterCSS伪类使之就像一个边框。

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

热门问答

求云函数可用的Pandas压缩包,一直失败,出现多个C extension问题?

配置 https 配置完后报错?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐已采纳

请检查服务器是否安装了代理?如有请尝试移除代理再尝试

另外,curl访问https时候需要确保服务器已经保存了证书,可以通过 curl -k --tlsv1 过滤

即时通信是否可以给小程序发送小卡片消息?

都快要考试了,从业者认证考试的准考证怎么还没发放?

您好,本月正式考试通知已经全部发送完毕。已安排考试中心重新为您发送,请注意查收站内信、邮件、短信及腾讯云助手公众号消息 如有疑问,可联系考试中心; 电话:400-8006213/13810321135 邮箱:qcloud@ats.org.cn... 展开详请

为什么绑定了域名之后的企业邮箱发送到Gmail被事儿别为垃圾邮件?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐
可以通过设置DMARC来解决邮件被其他邮局识别为垃圾邮件的问题 TXT记录值为:v=spf1 include:spf.mail.qq.com ~all 详细参考记录: https://work.weixin.qq.com/help?person_id=1&doc_id=524&h...... 展开详请

腾讯云cos如何通过api获取文件的永久url?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐
如果文件是公有读的,那直接拼路径即访问URL,格式如 https://<Bucket>.cos.<Region>.myqcloud.com/<Key> ,不需要接口。 如果使用的sdk,比如js sdk,则可以使用 getObjectUrl 方法 var url = cos.ge...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券