具有不规则矩形和边框的 CSS 自定义形状答案

【问题标题】：CSS custom shape with irregular rectangle and border具有不规则矩形和边框的 CSS 自定义形状
【发布时间】：2020-01-19 19:18:47
【问题描述】：

我正在尝试创建这样的按钮：

在网上研究后，我只是想出了一个平行四边形。但结果是这样的：

代码：

.parallelogram {
  width: 100px;
  height: 50px;
  transform: skew(25deg);
  background: black;
  border: 1px solid #EC00F4;
  color: white;
  box-shadow: 0px 3px 8px #EC00F4;
}

&lt;button class="parallelogram"&gt; Hello button &lt;/button&gt;

有没有办法让边缘走到我想要的地方（如图所示）但不移动文本？

【问题讨论】：

相关：stackoverflow.com/a/52455695/8620333
文字是直的...我是故意的吗？它看起来很尴尬 - 作为一个极具表现力的 3Dish 父母的一部分......
@TemaniAfif 非常接近，但结果如下：jsfiddle.net/zn5oj8bh。边框不起作用。
@RokoC.Buljan 是的，文本必须是直的。这是一个按钮。
@RokoC.Buljan 我们不应该将 3D 应用于父元素，而是将其应用于您放置在后面的伪元素

标签： css css-shapes

【解决方案1】：

在伪元素上使用剪辑路径。诀窍是考虑相同的剪辑路径并对一个伪元素应用缩放变换以模拟边框。只需调整多边形的值即可获得所需的结果。

悬停查看不同的剪辑路径：

.parallelogram {
   padding:20px 45px;
   font-size:30px;
   color: white;
   border:none;
   background:none;
   outline:none;
   position:relative;
   z-index:0;
   margin:15px;
   filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));
}
.parallelogram:before,
.parallelogram:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);
   transition:1s all;
   background:#000;
}
.parallelogram:before {
  background:#EC00F4;
  transform:scale(1.05,1.12);
}

.parallelogram:hover:before,
.parallelogram:hover:after {
   clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);
}

<button class="parallelogram"> Hello button </button>
<button class="parallelogram"> button </button>
<button class="parallelogram"> A </button>

你也可以考虑像素值保持相同的形状不管里面的内容：

.parallelogram {
   padding:20px 45px;
   font-size:30px;
   color: white;
   border:none;
   background:none;
   outline:none;
   position:relative;
   z-index:0;
   margin:15px;
   filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));
}
.parallelogram:before,
.parallelogram:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   clip-path: polygon(0 10px, 100% 0, calc(100% - 8px) calc(100% - 15px), 5px calc(100% - 8px));
   transition:1s all;
   background:#000;
}
.parallelogram:before {
  background:#EC00F4;
  transform:scale(1.05,1.12);
}

.parallelogram:hover:before,
.parallelogram:hover:after {
   clip-path: polygon(0 5px, 100% 0, 100% 100%, 10px calc(100% - 20px));
}

<button class="parallelogram"> Hello button </button>
<button class="parallelogram"> button </button>
<button class="parallelogram"> A </button>

【讨论】：

这太棒了。这和图片中的一模一样！了不起的工作@Temani Afif
这在 IE11 中不起作用。不是我个人关心，只是说......

【解决方案2】：

您可以使用伪元素来设置透视效果：

例子

.parallelogram {
  width: 100px;
  height: 50px;
  position: relative;
  color: white;
  /* appearance:none; could be used too */
  background: none;
  border: none;
  cursor: pointer;  /* show where and that i'm clickable */
}

.parallelogram:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 110%;  /* might need to be resized */
  height: 100%;
  transform: /* tune the rotation and perspective values to your needs */
    perspective(200px) 
    rotatey(35deg) 
    rotatex(-25deg)
    ;
  background: black;
  border: 2px solid #ec00f4;
  box-shadow: 0px 3px 8px #ec00f4;
}

&lt;button class="parallelogram"&gt; Hello button &lt;/button&gt;

火狐截图：

【讨论】：

@RokoC.Buljan ??它在那里，你用什么浏览器？ （制作并添加了今天最新 Firefox 的屏幕截图）
这很好，很接近@G-Cyr，但 Temani 做了一个更好的版本。再次感谢您！
@IkePr 这是一个提示 :) 。玩 CSS 玩得开心。

【解决方案3】：

这有点像你想要的：

button{
   width: 150px;
   height: 50px;
   -webkit-clip-path: polygon(0% 20%, 92% 14%, 88% 88%, 0% 100%);
   clip-path: polygon(0% 20%, 92% 14%, 88% 88%, 0% 100%);
   background: black;
   color: white;
}

&lt;button class="parallelogram"&gt; Hello button &lt;/button&gt;

编辑：

您可以在此处创建一个看起来与您的按钮一模一样的 SVG：https://vectr.com/new

您可以添加边框+阴影并简单地复制html。

【讨论】：

非常接近：jsfiddle.net/zn5oj8bh/1 但是边框不起作用，并且盒子阴影。

【解决方案4】：

使用 .unskew 类添加一个跨度，并在背景上执行与倾斜效果相反的操作并更改显示规则。

示例：

CSS

.parallelogram {
    transition: background 0.3s;
    transform: skew(-25deg);
    /* SKEW */
}

.unskew{
    display: block;
    /* block or inline-block is needed */
    text-decoration: none;
    padding: 5px 10px;
    font: 30px/1 sans-serif;
    transform: skew(25deg);
    /* UNSKEW */
    color: inherit;
}

HTML

<button class="parallelogram"><span class="unskew" >Hello button</span></button>

【讨论】：