Как сделать волнистую полоску на css?

212

25 сентября 2018, 01:00

Подскажите, как можно сделать вот такую полоску лесенкой с помощью css

Answer 1

На html и css

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
.angles{ 
  display:flex; 
  align-items:flex-start; 
  list-style:none; 
  padding:0 0 0 10px; 
} 
.angles li{ 
  width:30px; 
  height:30px; 
  border:4px solid yellow; 
  border-left:none; 
  border-bottom:none; 
  transform:rotate(-37deg) skewX(14deg); 
  transform-origin:center; 
  margin-right:14px; 
}

<ul class="angles"> 
  <li></li> 
  <li></li> 
  <li></li> 
  <li></li> 
  <li></li> 
</ul>

На svg

#angles{ 
  stroke-width:3px; 
  stroke:yellow; 
  fill:none; 
}

<svg width="142px" height="16px" viewBox="0 0 142 16" preserveAspectRatio="xMinYMid slice"> 
  <path id="angles" d="M0,2 l15.778,13 15.778,-13 15.778,13 15.778,-13 15.778,13 15.778,-13  15.778,13 15.778,-13 15.778,13" /> 
</svg>

Answer 2

body { 
    background: green; 
} 
 
ul { 
    display: flex; 
    list-style: none 
} 
 
.a::before { 
        padding: 0; 
    margin: 0; 
    content: ""; 
    position: relative; 
    display: block; 
    background: yellow; 
    width: 17px; 
    height: 2px; 
    border-radius: 100px; 
    transform: rotate(-20deg) 
} 
 
.a::after { 
    padding: 0; 
    margin: 0; 
    content: ""; 
    border-radius: 100px; 
    position: relative; 
    top: -2px; 
        left: 15px; 
 
    display: block; 
    background: yellow; 
    width: 17px; 
    height: 2px; 
    margin-right: 12px; 
    transform: rotate(20deg) 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/main.css"> 
</head> 
 
<body> 
  <ul> 
      <li class="a"></li> 
      <li class="a"></li> 
      <li class="a"></li> 
      <li class="a"></li> 
      <li class="a"></li> 
      <li class="a"></li> 
  </ul>    
</body> 
</html>

Если угол наклона линий захотите поменять.

Answer 3

Конечно, не помешало бы сглаживание, но можно с помощью linear-gradient:

div { 
  position: relative; 
  height: 100px; 
  background-color: #ffd800; 
  background-size: 32px 20px; 
  background-position: 0 0, 0 0, -16px 0, 16px 0px; 
  background-image: linear-gradient(35deg, #fff 11px, transparent 0), linear-gradient(-35deg, #fff 11px, transparent 0), linear-gradient(-145deg, #fff 11px, transparent 0), linear-gradient(145deg, #fff 11px, transparent 0); 
}