it-swarm.com.ru

Создание неровной границы треугольника в CSS

У меня есть форма с краем, как это в Photoshop:

image

Можно ли сделать повторяющиеся треугольники в виде рамки с CSS?

17
svbnet

Вы можете использовать градиенты css3 для создания фона с зигзагообразным рисунком, используйте псевдо after 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 Зигзагообразная граница с текстурированным фоном

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

34
extramaster

Для будущих зрителей я нашел эту адаптацию @ extramaster's answer немного проще. 

По сути, это то же самое, но он использует наименьшее количество фоновых градиентов и позволяет объекту поддержки (.navbar в моей разметке) показывать сквозной код вместо жесткого кодирования второго цвета в зигзаг.

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

html:

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

css:

.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 */
}
11
mxdubois

Вы можете довольно легко создать индивидуальный треугольник с помощью CSS (просто настроить свойства границ). Для того, чтобы это работало, вам нужно сгенерировать немного разметки самостоятельно. Я бы рекомендовал против такого подхода.

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

К сожалению, пока нет простого способа достичь этого с помощью чистого CSS.

1
Juho Vepsäläinen

В CSS3 есть свойство border-image. Может быть, вы можете сделать это так, как хотите. Подробнее здесь http://www.w3schools.com/cssref/css3_pr_border-image.asp

1
marinbgd

Лично я думаю, что 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>

0
Daniel Fowler