Question

我必须绘制一条波浪线，需要使用CSS3绘制。波浪线应该看起来像附加的图像。

我尝试仅使用CSS创建，但无法正确创建。任何帮助表示赞赏。这是我创建的小提琴https://jsfiddle.net/anirbankundu/myzmknLu/

.jagged-edge{
    display: inline-block;
    background-color: none;
    border-left: none;
    width: 1%;
    height: 20px;
    position: relative;
    right: 1%;
}

.jagged-edge:after {
    content: '';
    position: absolute;
    background: linear-gradient(-20deg,transparent 0,transparent 
    45%,#bcbcbc 45%,#bcbcbc 50%,#C4DCED 50%,#C4DCED 100%) 0 3px,linear-
    gradient(-155deg,transparent 0,transparent 45%,#bcbcbc 45%,#bcbcbc 
    50%,#C4DCED 50%,#C4DCED 100%) 0 3px;
    background-size: 100% 6px;
    width: 100%;
    height: 100%;
    left: 45%;
    z-index: 0;
}


<div class="jagged-edge">
</div>

Answer 1

我相信这就是你要找的东西。我确信可能有更多的语义方法，但这可以完成它。使用设置进行播放以实现精确的视觉效果干杯

    $color: #336699;
.wrapper {
  padding: 50px;
}

.top-line {
  background-color: $color;
  display: block;
  height: 50px;
  position: relative;
  width: 3px;

  &:after {
    background-color: $color;
    bottom: -6px;
    content: '';
    display: block;
    height: 3px;
    position: absolute;
    transform: rotate(25deg);
    width: 30px;
  } 
}
.middle-line {
  background-color: $color;
  bottom: -10px;
  display: block;
  height: 3px;
  left: -20px;
  position: relative;
  width: 50px;
}

.bottom-line {
  background-color: $color;
  display: block;
  height: 50px;
  margin-top: 20px;
  position: relative;
  width: 3px;

  &:before {
    background-color: $color;
    content: '';
    display: block;
    height: 3px;
    left: -21px;
    position: absolute;
    top: -7px;
    transform: rotate(25deg);
    width: 25px;
  }
}

https://codepen.io/garynorris88/pen/yXGYMM

Answer 2

所以这条线看起来像是侧面的＆＃39; z＆＃39;在它给我。所以我用css通过：在伪类之前添加一个（旋转）。

如果你喜欢它，我可以尝试调整，因为我看到1像素的间隙，你的波浪形更多一点＆＃39; smushed＆＃39;

标记：

＆＃13;

.squiggly-line {
  height: 100px;
  border-left: 2px solid #4c6675;
  position: relative;
}

.squiggly-line:before {
  content: 'z';
  font-size: 22px;
  position: absolute;
  top: 40%;
  left:-6px;
  background: white;
  line-height: 9px;
  vertical-align: -2px;
  display: inline-block;
  transform: rotate(49deg) scaleY(0.7);
  color: #4c6675;
  font-weight: 600;
  font-family: 'Arial';
}

＆＃13;

<div class="squiggly-line"></div>

＆＃13;

<div class="squiggly-line"></div>

CSS：

.squiggly-line {
  height: 100px;
  border-left: 2px solid #888;
  position: relative;
}

.squiggly-line:before {
  content: 'z';
  font-size: 22px;
  position: absolute;
  top: 40%;
  left:-6px;
  background: white;
  line-height: 9px;
  vertical-align: -2px;
  display: inline-block;
  transform: rotate(40deg);
  color: #888;
  font-weight: 600;
  font-family: 'Arial';
}

Answer 3

使用.svg文件执行此任务，并让其他浏览器使用直线，这就是我今天要做的，因为我发现它更干净。

Gimp是一个很好的创建矢量图形的程序，一定要使用裁剪文档到内容功能，我也要在svg中正确设置尺寸，保存几行css（而不是使用其他宽度）属性）。

但是你也可以让旧浏览器使用png（如果你关心~5％的用户没有使用这种技术看到那条线路）：

background: url(../old-browsers.png);  
background: linear-gradient(transparent, transparent), url(../path/to/svg);
/*width: something */

优势：更自由和轻松

骗局：对一小群用户而言视觉吸引力较小

Answer 4

对于它的价值，这是一个SVG，你可以用它作为div右侧或左侧元素的背景。

<svg viewbox="0 0, 20, 70" height="70">
  <path d="M 10 0 L 10 30 L 16 35 L 4 35 L 10 40 L 10 70" stroke="#555" stroke-width="2" stroke-linejoin="round" fill="none"/>
</svg>

Answer 5

您还可以使用渐变来查看log.path <- # Path to log file tryCatch({ # Code to attempt log(q) }, error = function(err.msg){ # Add error message to the error log file write(toString(err.msg), log.path, append=TRUE) } )和background-image，以便通过单个类绘制每个位而不需要额外的标记：

＆＃13;

background-size

＆＃13;

.jagged {
  background:
    linear-gradient(0deg, turquoise, turquoise) no-repeat 1em top,
    linear-gradient(0deg, turquoise, turquoise) no-repeat 1em bottom ,
    linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.15em calc(50% + 0.25em),
    linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.65em calc(50% - 0.25em),
    linear-gradient(90deg, turquoise ,turquoise ) no-repeat 0.5em 50% 
    gold /* you can add here a bg-color or add another background-image */;
  background-size: 
  2px calc(50% - 0.5em),
  2px calc(50% - 0.5em) , 
  3em 0.5em, 
  3em 0.5em, 
  1em 1px ;
  padding:2em;  
}
/* example bis */
.jagged + .jagged {
  background:
    linear-gradient(0deg, turquoise, turquoise) no-repeat 1em top,
    linear-gradient(0deg, turquoise, turquoise) no-repeat 1em bottom ,
    linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.15em calc(50% + 0.25em),
    linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.65em calc(50% - 0.25em),
    linear-gradient(90deg, turquoise ,turquoise ) no-repeat 0.5em 50%,
    url(http://lorempixel.com/600/800/nature/6) ;
  background-size: 
  3px calc(50% - 0.5em),
  3px calc(50% - 0.5em) , 
  3em 0.5em, 
  3em 0.5em, 
  1em 2px,
  cover;
  color:turquoise;
  text-shadow: 0 0 1px black;
  font-size:1.5em;

＆＃13;

https://codepen.io/gc-nomade/pen/weRMBJ

使用CSS3的Squiggly线

5 个答案: