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

#css #css3

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


    

Ответы

Ответ 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;
}

  

  

  

  

  






На svg



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



Ответ 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)
}



    
    
    



  

      

      

      

      

      

      

  
   





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


Ответ 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);
}





P.S. Если угол 45deg то артефактов нет.