CSS如何实现一个任意倒三角
绘制倒三角形，已知它的三边长分别为240px、150px、200px，请给出CSS代码。
DOCTYPE HTML>
<html>
<head><meta http-equiv='Content-Type' content="text/html;charset=utf-8" /><style>#triangle {/* 补充代码 */}style>
head>
<body><div id="triangle">div>
body>
html>
倒三角形的放置方式如下六种：
倒三角（1）
倒三角（2）
倒三角（3）
倒三角（4）
倒三角（5）
倒三角（6）
对应CSS实现代码：
倒三角（1）CSS代码
#triangle {/* 补充代码 */width: 0;height: 0;border-top-width: 124.58px;border-right-width: 83.54px;border-left-width: 156.46px;border-bottom-width: 0;border-color: red transparent transparent transparent ;border-style: solid;}
倒三角（2）CSS代码
#triangle {/* 补充代码 */width: 0;height: 0;border-top-width: 124.58px;border-right-width: 156.46px;border-left-width:83.54px;border-bottom-width: 0;border-color: red transparent transparent transparent ;border-style: solid;}
倒三角（3）CSS代码
#triangle {/* 补充代码 */width: 0;height: 0;border-top-width: 199.33px;border-right-width: 133.67px;border-left-width:16.33px;border-bottom-width: 0;border-color: red transparent transparent transparent ;border-style: solid;}
倒三角（4）CSS代码
#triangle {/* 补充代码 */width: 0;height: 0;border-top-width: 199.33px;border-right-width: 16.33px;border-left-width:133.67px;border-bottom-width: 0;border-color: red transparent transparent transparent ;border-style: solid;}
倒三角（5）CSS代码
#triangle {/* 补充代码 */width: 0;height: 0;border-top-width: 149.5px;border-right-width: 12.25px;border-left-width:187.75px;border-bottom-width: 0;border-color: red transparent transparent transparent ;border-style: solid;}
倒三角（6）CSS代码
#triangle {/* 补充代码 */width: 0;height: 0;border-top-width: 149.5px;border-right-width: 187.75px;border-left-width:12.25px;border-bottom-width: 0;border-color: red transparent transparent transparent ;border-style: solid;}
CSS实现三角形的原理我在纯CSS绘制三角形中有详细的介绍。这里仅仅针对CSS实现任意倒三角形的具体案例做相关代码。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！