• 技术文章 >web前端 >前端问答

    css3线性渐变可以实现三角形吗

    青灯夜游青灯夜游2022-04-25 15:01:27原创170

    css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css3中,实现三角形有多种方法,其中一种就是利用线性渐变。下面我们就来给大家具体介绍一下。

    使用线性渐变 linear-gradient 实现三角形的原理也非常简单,我们实现一个 45° 的渐线性变:

    div {
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, deeppink, yellowgreen);
    }

    3.png

    让它的颜色从渐变色变为两种固定的颜色:

    div {
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
    }

    4.png

    再让其中一个颜色透明即可:

    div {
      background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
    }

    5.png

    再通过旋转 rotate 或者 scale,我们也能得到各种角度,不同大小的三角形:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    html,
    body {
    width: 100%;
    height: 100%;
    display: flex;
    }
    
    div {
    width: 100px;
    height: 100px;
    margin: auto;
    }
    
    .rotate {
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
    }
    
    .top {
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
    transform: rotate(135deg);
    }
    
    .left {
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
    transform: rotate(45deg);
    }
    
    .bottom {
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
    transform: rotate(-45deg);
    }
    
    .right {
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
    transform: rotate(-135deg);
    }
    </style>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>

    1.png

    (学习视频分享:css视频教程web前端

    以上就是css3线性渐变可以实现三角形吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:线性渐变 CSS3
    上一篇:html5怎么让头和尾固定不动 下一篇:css3新增伪类选择器有哪些
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3怎么设置img水平翻转• css3有阴影效果吗• css3控制旋转方向的属性是什么• rgba在css3的含义是什么• css3层次选择器的用法是什么• css3属性选择器的用法是什么
    1/1

    PHP中文网