ife系列之网页页面“小三角”的实现方式

最新推荐文章于 2023-10-14 23:41:33 发布

微光瞬间

最新推荐文章于 2023-10-14 23:41:33 发布

阅读量811

点赞数

分类专栏：百度ife前端学习

本文链接：https://blog.csdn.net/qq_31782957/article/details/65638132

版权

问题引出：　　最近在写ife作业的时候，边写边查资料，查着查着就偏题了，看到一个网页中的“小三角”很好看（很不好意思，那个网页地址给忘了），不自觉的按下F12，看看有没有源码可以借鉴一下，很简单地就找到了，哈哈，很开森。

摘要由CSDN通过智能技术生成

问题引出：
　　最近在写ife作业的时候，边写边查资料，查着查着就偏题了，看到一个网页中的“小三角”很好看（很不好意思，那个网页地址给忘了），不自觉的按下F12，看看有没有源码可以借鉴一下，很简单地就找到了，哈哈，很开森。对了，实现的效果大致如下图：网页小三角实现方式
　　

针对上面的效果，本人目前有三种实现方式（相信还有其他好的实现方式），下面一一介绍：
　　1）第一种方式(“实心小三角”)：
　　此种方式主要是将宽高全置为0，通过设置伪元素的border样式来实现的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有趣的小三角实现方式</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .dv1{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            background: #FFF;
            box-sizing: border-box;
            border: 1px solid #CCC;
        }
        .dv1::after{
            content: "";
            width: 0;
            height: 0;
            display: inline-blo

最低0.47元/天解锁文章

微光瞬间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ife系列之网页页面“小三角”的实现方式

问题引出：　　最近在写ife作业的时候，边写边查资料，查着查着就偏题了，看到一个网页中的“小三角”很好看（很不好意思，那个网页地址给忘了），不自觉的按下F12，看看有没有源码可以借鉴一下，很简单地就找到了，哈哈，很开森。
复制链接

扫一扫