主页 / 问题 / 859481
Accepted
Вася
Asked:2020-07-24 15:43:20 +0000 UTC2020-07-24 15:43:20 +0000 UTC

如何在css中制作波浪条纹？

  • 772

告诉我你怎么能用css

在此处输入图像描述

css

3 个回答

  1. Best Answer

    开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>

    • 13 

  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>
    如果你想改变线条的角度。

    • 7

  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);
}
    <div></div>

    PS如果角度45deg没有伪影。

    • 5

相关问题