用CSS制做一个三角形！

    <style>

        .outer {

            width: 0;

            height: 0;

         border-left: 10px solid transparent;

         border-right: 10px solid #ccc;

         border-top: 10px solid transparent;

         border-bottom: 10px solid #ccc;

        }

    </style>

</head>

<body>

    <div class="outer"></div>

</body>

简单写法

    <style>

        .outer {

            width: 0;

            height: 0;

            border: 50px solid transparent;

            border-top-color: pink;

        }

    </style>

</head>

<body>

    <div class="outer"></div>

</body>

用CSS制做一个三角形！的更多相关文章

  1. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  2. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  3. 如何用css实现一个三角形？

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  4. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  5. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  6. Effective前端(3)用CSS画一个三角形

    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...

  7. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

  8. Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  9. 用纯CSS创建一个三角形

    原理:把上.左.右三条边隐藏掉(颜色设为 transparent) #demo { width:; height:; border-width: 20px; border-style: solid; ...

随机推荐

  1. 推荐一款最强Python自动化神器！再也不用写代码了！

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 搞过自动化测试的小伙伴,相信都知道,在Web自动化测试中,有一款自动化测试神器工具: seleniu ...

  2. CentOS 8 部署 ASP.NET Core 3.1 应用程序 kestrel+Nginx IIS+kestrel

    vs2019发布到IIS  下载文档https://files.cnblogs.com/files/netlock/%E4%BD%BF%E7%94%A8VS2019%E5%8F%91%E5%B8%83 ...

  3. Epson 打印机计数器清零

    错误提示:废墨垫需要维护.请联系爱普生认证服务机构. 一.下载打印机清零软件 软件名称:EPSON Adjustment Program 二.USB线连接打印机 清零前请取消打印任务,打印机用USB线 ...

  4. MySQL如何计算统计redo log大小

      在MySQL中如何计算.统计重做日志(redo log)的生成情况呢? 例如10分钟内,生成了多少M的redo log呢?30分钟内又生成了多少M的redo log......MySQL没有像Or ...

  5. Pytest测试框架（一）：pytest安装及用例执行

    PyTest是基于Python的开源测试框架,语法简单易用,有大量的插件,功能非常多.自动检测测试用例,支持参数化,跳过特定用例,失败重试等功能. 安装 pip install -U pytest  ...

  6. 解决threadLocal父子变量传递问题

    一.问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路.然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取 ...

  7. Linux 路由 静态路由

    Linux 路由 静态路由 目录 Linux 路由 静态路由 一.临时生效,使用命令route A.添加到主机的路由 B.添加到网络的路由 C.添加默认路由 D.删除路由 E.查看所有路由信息 二.临 ...

  8. JavaScript入门-学习笔记(一)

    JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...

  9. android中VideoView播放sd卡上面的视频

    (1)videoView组件只支持MP4和3gp格式的视屏播放,如果想播放其它视屏格式的文件,还得开发能够播放的视屏播放器 (2)videoView组件功能比较单一,如果想开发功能丰富的播放器,还得重 ...

  10. tep0.6.0更新聊聊pytest变量接口用例3个级别复用

    tep是一款测试工具,在pytest测试框架基础上集成了第三方包,提供项目脚手架,帮助以写Python代码方式,快速实现自动化项目落地.fixture是pytest核心技术,本文聊聊如何使用fixtu ...