• 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 山西十一选五最新遗漏:用CSS画一个带阴影的三角形的示例代码

    山西体彩11选5直选遗漏 www.caxru.com   发布时间:2019-03-04 15:29:30   作者:zzzmj   我要评论

    这篇文章主要介绍了用CSS画一个带阴影的三角形的示例代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    1. 思路

    怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题

    假设我们做一个向下的三角形箭头 常见的方法大致有两种

    1. 通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可
    2. 通过 transform 旋转盒子

    方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言)

    2. 设计

    2.1 边框法

    html结构

    <body>
        <div class="box"></div>
    </body>

    css样式

    .box {
        position: relative;
        width: 200px;
        height: 100px;
        background: #ff8605;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
    }
    .box::after {
        content: '';
        position: absolute;
        bottom: -9px;
        left: 45px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #ff8605;
    }

    缺点很明显, 我们不能通过box-shadow的方式来设置阴影, 阴影会是一个盒子

    但如果不用设阴影, 只是需要边框的话, 我们可以再定义一个伪类元素, 覆盖到三角形的下面即可

    .box::before {
        position: absolute;
        bottom: -10px;
        left: 45px;
        content: '';
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(0, 0, 0, .1);
    }

    如图所示

    如果要求不严格似乎也够用了. 但作为一个严峻的前端工程师! 我们还是不能容忍这种实现方法, 下面我们看一看 tranform 方法是如何解决的

    2.2 transform方法

    这种方法的思路就是使用transform旋转盒子, 一半被上面的容器遮挡, 一半显示出来

    .box::before {
        position: absolute;
        bottom: -5px;
        left: 45px;
        content: '';
        width: 10px;
        height: 10px;
        background: #ff8605;
        transform: rotate(135deg);
        box-shadow: 1px -2px 2px rgba(0, 0, 0, .2);
    }

    我们似乎实现了我们想要的结果, 但是, 其实是存在一个问题的, 但因为我们的阴影面积不够大, 所以图片上看起来不明显

    当我们把 box-shadow 的阴影面积扩大时, 我们发现到问题的所在了

    盒子突出来了, 那怎么解决呢

    我们再定义一个与容器颜色相同的盒子, 将上半部分盖住就可以啦.

    /* transform方法 */
    .box::before {
        position: absolute;
        bottom: -5px;
        left: 45px;
        content: '';
        width: 10px;
        height: 10px;
        background: #ff8605;
        transform: rotate(135deg);
        box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
    }
    .box::after {
        position: absolute;
        bottom: 0px;
        left: 40px;
        content: '';
        width: 20px;
        height: 20px;
        background: #ff8605;
    }

    要注意三角形应该用 before 定义, 覆盖的盒子应该用 after 定义, 这样盒子才能覆盖到三角形上面

    实现效果:

     

    3. 最终解决方案代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width" />
            <title>CSS实现带阴影效果的三角形</title>
            <style>
                .box {
                    position: relative;
                    width: 200px;
                    height: 100px;
                    background: #ff8605;
                    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
                }
                .box::before {
                    position: absolute;
                    bottom: -5px;
                    left: 45px;
                    content: '';
                    width: 10px;
                    height: 10px;
                    background: #ff8605;
                    transform: rotate(135deg);
                    box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
                }
                .box::after {
                    position: absolute;
                    bottom: 0px;
                    left: 40px;
                    content: '';
                    width: 20px;
                    height: 20px;
                    background: #ff8605;
                }
            </style>
        </head>
        <body>
            <div class="box"></div>
        </body>
    </html>

    如果你有更好的实现办法, 欢迎给我留言

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    最新评论

  • 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 感触名家笔下的端午文化 吃香粽原来可以这样"文艺" 2019-04-16
  • 北京赛车pk10开奖直播 天津时时彩五星综合图走势图 北京赛车开户 北京赛车pk10app 排列五开奖 老时时彩预测 排列三 重庆时时彩破译软件 国彩胜平负对应亚盘 北京赛车直播苹果手机 北京赛车直播官网cp5678 天津时时彩实体店 qq分分彩计划数据 浙江福彩12选5开奖结果 北京赛车七码公式规律 双色球3d尾数分布图