2021-06-11——HTML用CSS编写三角效果

最新推荐文章于 2024-08-02 22:01:24 发布

今天少吃一点

最新推荐文章于 2024-08-02 22:01:24 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/m0_58822480/article/details/117805176

版权

代码如下：

<!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>三角设计</title>
    <style>
    .box {
        width:200px;
        height:100px;
        margin:20px auto;
       
        position:relative;
    }
    .box1 {
        width:200px;
        height:100px;
        background-color: rgb(240, 182, 182);
        border:1px solid rgb(240, 182, 182);
    }
    .box2 {
        width:0;
        height:0;
        font-size:0;
        line-height:0;
       
        position:absolute;
        left:90px;
        top:-40px;
    }
    .box2 em,.box2 ins {
        width:0;
        height:0;
       
        display:block;
        position:absolute;
        border:20px solid transparent;
        border-style:dashed dashed solid dashed;
    }
    .box2 em {
        
        border-bottom-color:rgb(240, 182, 182);
    }
    .box2 ins {
      
        border-bottom-color:rgb(240, 182, 182);

    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"> <em></em> <ins></ins> </div>
      </div>
</body>
</html>

结果如下：在这里插入图片描述

今天少吃一点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-11——HTML用CSS编写三角效果

代码如下：<!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&
复制链接

扫一扫