带有不规则矩形和边框的CSS自定义形状

我正在尝试创建一个如下按钮：

在网上研究之后，我只想到制作一个平行四边形。但结果是：

代码：

。平行四边形{
宽度：100px；
高度：50px；
变换：倾斜（25度）；
背景：黑色；
边框：1px实心#EC00F4；
颜色：白色；
盒影：0px 3px 8px#EC00F4；
}

---

Hello按钮

这有点像你想要的：

按钮{
宽度：150px；
高度：50px；
-webkit剪辑路径：多边形（0%20%、92%14%、88%88%、0%100%）；
剪辑路径：多边形（0%20%，92%14%，88%88%，0%100%）；
背景：黑色；
颜色：白色；
}

---

Hello按钮

添加一个span，使用class.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>

Hello按钮

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

范例

。平行四边形{
宽度：100px；
高度：50px；
位置：相对位置；
颜色：白色；
/*外观：无；也可以使用*/
背景：无；
边界：无；
光标：指针；/*显示可单击的位置和位置*/
}
.平行四边形：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：110%；/*可能需要调整大小*/
身高：100%；
变换：/*根据需要调整旋转和透视值*/
透视图（200px）
旋转角度（35度）
rotatex（-25度）
;
背景：黑色；
边框：2px实心#ec00f4；
盒影：0px 3px 8px#ec00f4；
}

---

Hello按钮

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

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

。平行四边形{
填充：20px 45px；
字体大小：30px；
颜色：白色；
边界：无；
背景：无；
大纲：无；
位置：相对位置；
z指数：0；
利润率：15px；
滤镜：投影（0px 30px 25px rgba（236,0244,0.45））；
}
.平行四边形：之前，
.平行四边形：后{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
剪辑路径：多边形（011%，100%0，90%88%，3%96%）；
过渡：1s全部；
背景：#000；
}
.平行四边形：之前{
背景：#EC00F4；
转换：量表（1.05,1.12）；
}
.平行四边形：悬停：之前，
.平行四边形：悬停：之后{
剪辑路径：多边形（5%2%，100%5%，100%100%，0%94%）；
}

Hello按钮
按钮
A

相关：文本笔直。。。我是故意的吗？这看起来很尴尬-作为一个富有表现力的3Dish家长的一部分…@TemaniAfif非常接近，但结果是：。边框不起作用。@RokoC.Buljan是的，文本必须笔直。这是一个按钮。@RokoC.Buljan我们不应该将3D应用于父元素，而应该将其应用于您放在后面非常近的伪元素：但是边框不起作用，框阴影。@RokoC.Buljan？？它就在那里，你用哪个浏览器？（制作并添加了最新版本Firefox的屏幕截图）这非常好，非常接近@G-Cyr，但Temani制作了一个更好的版本。再次非常感谢你@这是一个提示：）。玩CSS很开心。这太棒了。这和照片上的一模一样！了不起的工作@Temani AfifThis在IE11中不起作用。我个人并不在乎，只是说。。。