css 实现箭头

最新推荐文章于 2024-06-22 09:56:05 发布

suo172

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量566

点赞数

文章标签： css

本文链接：https://blog.csdn.net/suo172/article/details/104491449

版权

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头</title>

    <style type="text/css">
        .arrow {
            width: 20px;
            height: 20px;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
            /*background: pink;*/
            transform: rotate(45deg);
            margin-top: 50px;
            margin-left: 50px;
        }

        .triangle{
            width:0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent transparent seagreen;
        }

        .outset{
            width: 300px;
            height: 300px;
            background: cadetblue;
            /*padding-top: 20px;*/
            overflow: hidden;
        }

        .inner{
            width: 200px;
            height: 200px;
            background: yellow;
            margin-top: 20px;
            /*overflow: hidden;*/
            /*margin-top: 20px;*/
        }
        
    </style>
</head>
<body>
<!-- 箭头-->
<div class="arrow">
</div>

<!-- 小三角-->
<div class="triangle"></div>


<div class="outset">
    <div class="inner"></div>
</div>

</body>
</html>

suo172

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 实现箭头

代码如下箭头<style type="text/css"> .arrow { width: 20px; height: 20px; border-top: 1px solid #000; border-left: 1px solid #000; /*background:...
复制链接

扫一扫