Създаване на граница на назъбен триъгълник в CSS

Имам форма с ръб като този във Photoshop:

изображение

Възможно ли е да се направят повтарящите се триъгълници като рамка с CSS?


css css-shapes
person svbnet    schedule 08.12.2012    source източник
comment
За подобен ефект с извити долни ръбове (като капчици) вместо триъгълни, вижте този отговор.   -  person Harry    schedule 17.05.2015
comment
Не реагира, но решение за това може да се намери на css-shapes.xyz/saw-tooth -ефект на границата   -  person Akshay    schedule 16.10.2015

Отговори (5)


arrow_upward
39
arrow_downward

Можете да използвате градиенти, за да създадете зигзагообразен фон, използвайте псевдоелемента ::after, за да го приложите като рамка.

.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-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}
<div class="header"><h1>This is a header</h1></div>

Източник: CSS зигзагообразна рамка с текстуриран фон

JSFiddle: http://jsfiddle.net/kA4zK/

person extramaster    schedule 08.12.2012

arrow_upward
14
arrow_downward

За бъдещите зрители открих, че тази адаптация на отговора на @extramaster е малко по-проста.

По същество е същият, но използва един по-малко градиенти на фона и позволява на опорния обект (.navbar в моето маркиране) да се показва, вместо да кодира твърдо втория цвят в зиг-заг.

JsFiddle: http://jsfiddle.net/861gjx0b/2/

.header {
  position: relative;
  color: white;
  background-color: #2B3A48;
  text-align: center;
}

.navbar {
  background: #272220;
  height: 20px;
}

.header:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  /* -height */
  left: 0;
  right: 0;
  /* TODO Add browser prefixes */
  background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%);
  background-size: 8px 20px;
  /* toothSize doubleHeight */
  background-position: 0 -10px;
  /* horizontalOffset -height */
}
<div class="header">
  <h1>This is a header</h1>
</div>
<nav class="navbar"></nav>

person mxdubois    schedule 20.08.2014

arrow_upward
3
arrow_downward

Лично аз смятам, че clip-path е по-лесен за работа/разбиране от сложните градиенти на фона.

body {
  font-family:Roboto,'Open Sans',Helvetica,sans-serif;
}
.container {
  background:#ddd;
  margin:0 auto; 
  max-width:800px;
  padding:30px;
}
h1:first-child {margin:0;}

.jagged-bottom {
  position:relative;
}
.jagged-bottom:after {
    background:#ddd;
    content:"";
    height:2vw;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    clip-path:polygon(
       0 0, 2.5% 100%, 5% 0,  7.5% 100%, 
     10% 0,12.5% 100%,15% 0, 17.5% 100%, 
     20% 0,22.5% 100%,25% 0, 27.5% 100%, 
     30% 0,32.5% 100%,35% 0, 37.5% 100%, 
     40% 0,42.5% 100%,45% 0, 47.5% 100%, 
     50% 0,52.5% 100%,55% 0, 57.5% 100%, 
     60% 0,62.5% 100%,65% 0, 67.5% 100%, 
     70% 0,72.5% 100%,75% 0, 77.5% 100%, 
     80% 0,82.5% 100%,85% 0, 87.5% 100%, 
     90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
  }
}
<div class="container jagged-bottom">
  <h1>Looks Like A Receipt</h1>
  <p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p>
</div>

person Daniel Fowler    schedule 12.01.2019

arrow_upward
1
arrow_downward

В CSS3 има свойство border-image. Може би можете да го решите по начин, който искате. Повече тук:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

Или тук

https://www.w3schools.com/cssref/css3_pr_border-image.asp

person marinbgd    schedule 08.12.2012

arrow_upward
0
arrow_downward

Можете да създадете индивидуален триъгълник с помощта на CSS доста лесно (просто настройте свойствата на границата) . За да работи това, ще трябва сами да генерирате доста маркиране. Бих препоръчал срещу този подход.

Вместо това вероятно е по-добре да използвате отделно изображение, съдържащо един триъгълник (за предпочитане прозрачен .png) и след това да използвате свойствата background-image и background-repeat (repeat-x), за да го свържете към div (вашата "граница").

За съжаление все още няма пряк начин за постигане на това с помощта на чист CSS.

person Juho Vepsäläinen    schedule 08.12.2012