实用的css三角

前端开发工作中经常会有这样的开发需求,如下图所示:

1.png

接下来我们用代码来实现以下这个功能:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title></title>
    <style type="text/css">
        .box{
            width:0;
            height:0;
            border-top:10px solid red;
            border-left:10px solid transparent;
            border-right:10px solid transparent;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

原理是让div的content为空, 利用边框的宽度和颜色实现这个原理.
其中值得注意的是
border-left:10px solid transparent;
transparent 就是与父级的背景色颜色相同.

2.png

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title></title>
    <style type="text/css">
        .box{
            width:100px;
            height:30px;
            border:1px solid #666;
            box-shadow:1px 2px 3px #666;
            position:relative;
            background:#666;  
            opacity:0.5; 
        }
        .sj{
            width:20px;
            height:20px;
            position:absolute;
            left:20px;
            bottom:-12px;
            transform:rotate(45deg);
            background:#666;
            overflow:hidden;
            border-bottom:1px solid #c9e9c0;
            border-right:1px solid #c9e9c0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sj">
            
        </div>
    </div>
</body>
</html>

这个的原理利用了一些css3 的特性使小方块div 旋转了45度 ,
然后给大的div加了一个边框阴影效果.
当把 bottom:-12px; 变成bottom:-24px; 的时候会更明显一点;

2.1.png

看明白了吗?o(￣▽￣)ｄ

最后编辑于：2017.12.05 00:32:22

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

实用的css三角

推荐阅读更多精彩内容