用CSS将div变成三角形

来源:互联网 发布:英文发音软件 编辑:程序博客网 时间:2024/06/01 21:36

方形变三角形

通常我们印象中的HTML元素都是四四方方的,但是四四方方的东西也可以构建出完美的三角形哦。因为当一个矩形必须要平分给其上下左右四个方向的时候,就只好平分成四个三角形了。

代码实现

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <style>        div {            width:0;            height:0;            border:100px solid;            /* 平分效果 */            /*border-color:red green blue black; */            /* 单个三角形 */            border-color:transparent transparent lightgreen transparent;        }    </style></head><body>    <div></div></body></html>

平分效果图
单个三角形效果图

0 0
原创粉丝点击