css制作等腰三角形

最新推荐文章于 2024-05-16 10:30:02 发布

徐同保

最新推荐文章于 2024-05-16 10:30:02 发布

阅读量3.5k

点赞数 2

分类专栏： web前端前端技术分享文章标签： css 三角形

本文链接：https://blog.csdn.net/xutongbao/article/details/82424631

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css制作等腰三角形</title>
    <style type="text/css">
    .m-wrapper{display: inline-block; position: relative;width: 100px;height: 200px;}
    .m-left{position: absolute;bottom: 0; left: -200%;width: 200%;height: 200%; background-color: #ffffff; transform-origin:right bottom;}
    .m-right{position: absolute;bottom:0;right: -200%;width: 200%;height: 200%;background-color: #ffffff; transform-origin:left bottom;}
    .m-middle {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: #ff0000;
    }
    </style>
</head>

<body>
    <div class="m-wrapper">
        <div class="m-left" id="m-left"></div>
        <div class="m-middle"></div>
        <div class="m-right" id="m-right"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var myAction = {};
            var dom = {
                left: $('#m-left'),
                right: $('#m-right')
            };

            $.extend(myAction, {

                setHeight: function () {
                    var deg = 13;
                    setInterval(function () {
                        if (deg <= 90) {
                            deg++;
                        } else {
                            deg = 13;
                        }
                        dom.left.css({transform: 'rotate(' + deg + 'deg)'});
                        dom.right.css({transform: 'rotate(' + (0 - deg) + 'deg)'});
                    }, 100); 
                }
            });

            var init = function () {
                myAction.setHeight();
            }();
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css制作等腰三角形</title>
    <style type="text/css">
    .m-wrapper{display: inline-block; position: relative;width: 100px;height: 200px;}
    .m-left{position: absolute;bottom: 0; left: -200%;width: 200%;height: 200%; background-color: #ffffff; transform-origin:right bottom;}
    .m-right{position: absolute;bottom:0;right: -200%;width: 200%;height: 200%;background-color: #ffffff; transform-origin:left bottom;}
    .m-middle {
        display: none;
        width: 100%;
        height: 100%;
        background-color: #ff0000;
    }
    </style>
</head>

<body>
    <div class="m-wrapper">
        <div class="m-left" id="m-left"></div>
        <div class="m-middle" id="m-middle"></div>
        <div class="m-right" id="m-right"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var myAction = {};
            var dom = {
                left: $('#m-left'),
                right: $('#m-right'),
                middle: $('#m-middle')
            };

            $.extend(myAction, { 
                getDeg: function (percent) { 
                    var tan = 200 * percent / 50;
                    var result = Math.atan(tan) / (Math.PI / 180);
                    result = 90 - Math.round(result);
                    return result;
                },
                setHeight: function () {
                    var deg = myAction.getDeg(0.8);  //设置百分比可以调整等腰三角形的高度， 1是最大值， 即达到本等腰三角形的最大高度
                    dom.left.css({transform: 'rotate(' + deg + 'deg)'});
                    dom.right.css({transform: 'rotate(' + (0 - deg) + 'deg)'});    
                    dom.middle.show();                
                }
            });

            var init = function () {
                myAction.setHeight();
            }();
        })
    </script>
</body>

</html>

徐同保

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css制作等腰三角形

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css制作等腰三角形&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫