css平行六边形字不倾斜

CSS中想要实现一个平行六边形的字体并不难，但是如果想要保持字体不倾斜，就需要进行一些额外的处理。

    .parallelogram {
            transform: skewX(-20deg);
     /* 将元素倾斜20度 */        display: inline-block;
     /* 将元素转化为行内块级元素 */        margin: 0 10px;
     /* 设置元素左右margin值 */        padding: 5px;
     /* 设置元素内边距值 */        text-align: center;
 /* 设置文本居中 */    }
        .parallelogram span {
            transform: skewX(20deg);
     /* 将字体反向倾斜20度 */        display: inline-block;
     /* 将元素转化为行内块级元素 */        margin: 0 -10px;
     /* 设置元素左右margin值 */        padding: 5px;
     /* 设置元素内边距值 */        text-align: center;
 /* 设置文本居中 */    }
    

通过对父元素进行20度的倾斜，再对字体进行-20度的反向倾斜，即可保持字体不倾斜，同时实现平行六边形的效果。此外，还需要对元素进行适当的margin和padding设置，以便获得更好的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！