我可以使用CSS扭曲边框，使边框看起来像草绘的吗?

问题描述

我有一个有边框的框( div )，我想使它们看起来像一个草图，即边框的边界不是直线，而是有些扭曲，就像手工绘制一样.

I have bordered boxes (div) which I want to make look like a sketch, i.e. with the borders not drawn as straight lines, but slightly distorted, as if drawn by hand.

插图:

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

Can this be done using CSS transformation or similar?

推荐答案

此文章位于手绘边框提供了一个很好的示例，该示例通过使用大的椭圆形圆角(通过 CSS边界半径属性).对于大型 div 元素，它可能无法正常工作.

This article on hand-drawn borders gives a great example of achieving this effect on buttons using only CSS by using large elliptical rounded corners (through the CSS border-radius property). It probably won't work as well for large div elements.

根据文章改编的示例:

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>

这篇关于我可以使用CSS扭曲边框，使边框看起来像草绘的吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！