css制作等腰三角形

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

css制作等腰三角形相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页产品介绍服 ...
html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
html中多边形图形怎么制作,CSS制作图形速查表
前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下 ...
css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
使用css制作三角，兼容IE6，用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）
项目七项目实践:TABLE+CSS制作<互联世纪网> 实践目标 1. 熟悉CSS属性 2. 熟练运用CSS属性控制网页样式 3. 熟悉网页制作流程项目简介: 通过上一章节的学习,我们了 ...
html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验互联网发布时间:2008-10-17 19:28:20 作者:佚名我要评论让你使用DIV CSS排版不是让你用换个标签然后再去按照表格的方式去排版 ...

css制作等腰三角形

css制作等腰三角形相关推荐

最新文章

热门文章