您现在的位置:首页 >> 前端 >> 内容

用CSS将div变成三角形

时间:2017/1/7 9:23:00 点击:

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

方形变三角形

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

<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p {
            width:0;
            height:0;
            border:100px solid;
            /* 平分效果 */
            /*border-color:red green blue black; */

            /* 单个三角形 */
            border-color:transparent transparent lightgreen transparent;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

代码实现

用CSS将div变成三角形
用CSS将div变成三角形

Tags:用C CS SS S将 
作者:网络 来源:hesterdev的