css捏左边小曲线

CSS中，我们可以使用一些技巧来实现一些有趣的效果，比如捏左边小曲线。

.container {
    position: relative;
    padding-left: 20px;
}
.container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background-color: #ccc;
    border-radius: 0 10px 10px 0;
    transform: skewX(-20deg);
    transform-origin: left top;
}
    

上面的代码中，我们使用了一个伪元素:before，并将其定位到了父元素（.container）的最左边。我们设置了它的宽度、高度和背景颜色，并使用border-radius来使得它的左上角和左下角变成圆角。

关键的部分来了：我们使用了transform来使其倾斜，并使用transform-origin来规定倾斜的基准点。这里我们把基准点设置在左上角，这样倾斜的效果就是从左上角开始的了。同时，我们使用一个负值来使其向左倾斜，从而实现左边的小曲线。

最后，我们在父元素上设置了一些padding-left，这是为了防止左边的小曲线和父元素边框重合。

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