html小例子之css三角

教程管理员发布于2023-10-03 23:18 HTML教程 176

简介： html小例子之css三角

html小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left: 50px solid pink;
        }

        .sanjiao {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }

        span {
            position: absolute;
            /* border-width的两倍; */
            top: -20px;  
            right: 15px;
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;
            border: 10px solid transparent;
            border-bottom-color: red;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="sanjiao">
        <span></span>
    </div>
</body>
</html>

标签：#阿里 #开发者 #例子 #社区 #html #css

上一篇：将Html文档整理为规范XML文档
下一篇：table的innerHTML

html小例子之css三角

html小三角

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠