Подскажите, как можно сделать вот такую полоску лесенкой с помощью css
3 ответа
На 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>
-
-
-
@Геннадий Журов а как подобрать полоску размером 142 на 16 и 4,5 зубьев, как в примере? ниже есть рещение, но там на белом фоне. вот если бы прозрачный - было бы идеально!– Вася27 июл 2018 в 10:46
-
1
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>
-
При попытке сделать их более толстыми (как на картинке автора) у меня начало выходить что попало i.stack.imgur.com/cbrKT.png 24 июл 2018 в 8:30
-
Конечно, не помешало бы сглаживание, но можно с помощью 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);
}
<div></div>
P.S. Если угол 45deg
то артефактов нет.