我可以使用CSS来扭曲边框,使它们看起来像草图一样吗?

时间:2017-04-29 10:38:19

标签: css css-transforms

我有边框(div),我想让它看起来像一个草图,即边框没有画成直线,但有点扭曲,好像是手工绘制的。

插图:

"Sketched" boxes

可以使用CSS转换或类似方法完成吗?

2 个答案:

答案 0 :(得分:3)

您可以使用CSS Border Images

在w3schools网站上

Here is an example

这是一个代码示例:

#borderimg {
    /* You can also use border-top or border-bottom to target the side you want affected */
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

答案 1 :(得分:1)

这篇关于hand-drawn borders的文章提供了一个很好的示例,通过使用较大的椭圆圆角(通过CSS border-radius属性),仅使用CSS在按钮上实现了这种效果。大型div元素可能无法正常工作。

根据文章改编的示例:

button {
      background:transparent;
      padding:0.5rem 0.5rem;
      margin:0 0.5rem;
      font-size:1rem;

      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius:15px 255px;
}

button:hover{
   box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
button.lined.thick{
   border:solid 3px #41403E;
}
button.dotted.thick{
   border:dotted 3px #41403E;
}
button.dashed.thick{
  border:dashed 3px #41403E;
}
button.lined.thin{
   border:solid 2px #41403E;
}
button.dotted.thin{
   border:dotted 2px #41403E;
}
button.dashed.thin{
  border:dashed 2px #41403E;
}
<button class='lined thick'>Lined Thick</button>
<button class='dotted thick'>Dotted Thick</button>
<button class='dashed thick'>Dashed Thick</button>
<div>&nbsp;</div>
<button class='lined thin'>Lined Thin</button>
<button class='dotted thin'>Dotted Thin</button>
<button class='dashed thin'>Dashed Thin</button>