03月20, 2018

css效果之尖角弧度

上周在写一个css效果时,碰到这样的图:

alt

alt

初看比较简单,下面不就是一个三角形么,然后让其透明即可。

设计师看了我的实现,说:不对,左右两边需要把尖角改成有弧度的。

于是我就试图改三角形的border-radius,第一版效果如下:

alt

大家看左边即可,我可能没多大审美感, 视觉说:感觉左边圆角不太对。细看,果真如此。

于是乎,我就郁闷了,后来想到一个方案,拼两个三角形(即左右两边),然后想去尝试一下。

技术群有人给了我一些建议,如svg,四边形之类的解决方案。

不得不说,四边形的解决方案很牛逼,我截一下两张图,大家就知道实现原理了。

alt

alt

原理就是改变Y轴即可,所以less的代码如下:

.sy-flag-recommend2 {
    display: inline-block;
    width: 20px;
    height: 24px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    &:before,
    &:after {
        content: "";
        display: block;
        width: 100%;
        height: 200%;
        background-color: red;
        border-radius: 3px;
        position: absolute;
        top: 0;
        z-index: -1;
    }
    &:before {
        transform: skewY(-30deg) translateY(-50%);
        transform-origin: left bottom;
    }
    &:after {
        transform: skewY(30deg) translateY(-50%);
        transform-origin: right bottom;
    }
}

通过修改角度,我们就可以得到不同的夹角,然后再把对应的宽高、颜色修改掉,就可以得到我们想要的效果。

在此感谢群里面的那个哥们,以及我的另外一个同事。这几年没怎么写页面,css确实荒废了不少,orz。。

经另外一个群友提示,height: 100%也行,然后将translateY(-50%)去掉,效果是一样的。

本文链接:www.my-fe.pub/post/css-triangle-border.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。