<!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>
