用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之复制列表

    将一个列表的数据复制到另外一个列表中. 1 a = [1,2,3] #定义列表a 2 3 b = a[:] #将列表a的切片赋值给b,也可以理解为将b的值设置为a[:] 4 5 print(a) #打 ...

  2. axios前端加密通讯的处理

    axios前端加密通讯的处理 今天谈一谈前段时间,项目中遇见的前端axios加解密的处理. 先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是 ...

  3. Solon 1.2.12 发布，新的惊喜

    Solon 一个类似Springboot的微型开发框架.强调:克制 + 简洁 + 开放的原则.力求:更小.更快.更自由的体验. 所谓更小: 内核0.1m,最小Web开发单位0.2m(相比Springb ...

  4. 【kinetic】操作系统探索总结（五）创建简单的机器人模型smartcar

    p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: justify } a:link { color: r ...

  5. ESP32 BLE蓝牙 微信小程序通信发送大于20字符数据

    由于微信小程序只支持BLE每次发送数据不大于20个字节,ESP32则有经典蓝牙.低功耗蓝牙两种模式. 要解决发送数据大于20个字节的问题,最简单实用的方式就是分包发送.如下图所示: 1.什么起始字符和 ...

  6. css 自定义悬浮窗写法

    HTML: css(sass): 复制代码 .info { } &:hover::after { content: attr(data-title); display: inline-bloc ...

  7. JavaDailyReports10_16

    今天学习安装配置了JavaWeb的资源环境, 明天开始学习HTML!

  8. canvas--总结二

    canvas图形绘制 矩形绘制 rect(x,y,w,h)  没有独立路径 strokeRect(x,y,w,h) 有独立路径,不影响别的绘制 fillRect(x,y,w,h) 有独立路径,不影响别 ...

  9. Erlang那些事儿第3回之我是函数(fun),万物之源MFA

    Erlang代码到处都是模式匹配,这把屠龙刀可是Erlang的看家本领.独家绝学,之前在<Erlang那些事儿第1回之我是变量,一次赋值永不改变>文章提到过,Erlang一切皆是模式匹配. ...

  10. log4j2文件结构

    标签结构 Configuration properties Appenders Console PatternLayout File RollingRandomAccessFile Filters T ...