用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. UWP 适配不同设备 屏幕

    1.DeviceFamily-Type文件夹 将Index.xaml拷贝到DeviceFamily-Desktop 和DeviceFamily-Mobile,删除这2个目录下的Index.xmal.c ...

  2. JS C# 正则表达式去除html字符中所有的标签（img em标签除外）

    js去除em标签 $(this).html().replace(/<(?!em|\/em).*?>/g, '') C#去除 System.Text.RegularExpressions.R ...

  3. Asp.Net Core仓储模式+工作单元

    仓储模式+工作单元 仓储模式 仓储(Repository)模式自2004年首次作为领域驱动模型DDD设计的一部分引入,仓储本质上是提供提供数据的抽象,以便应用程序可以使用具有接口的相似的简单抽象集合. ...

  4. ASP.NET Core 3.1使用 AutoMapper

    多层架构中存在多种模型,如视图模型ViewModel,数据传输对你DTO,ORM对象等,这些数据在层与层之间进行传输必须涉及类型之间的转换. AutoMapper是一个对象-对象映射器,作用是通过设置 ...

  5. JS拼接字符串太长希望换行保持html格式拼接的方法

    1. 通常情况 tabPeoStr +='<tr class="tabPeo"><td>'+data[i].name+'</td><td& ...

  6. （十三）、向shell脚本中传参

    一.向脚本中传递位置参数 向脚本中传递参数的数目理论上可以无数多,但是只有前9个能被访问,使用shift可以改变此限制 $0 $1 $2 $3 $4 $5 $6 $7 $8 $9 脚本名字 first ...

  7. 网络 IO 工作机制

    ref: 深入分析 java web 技术内幕 2.3 两台计算机之间进行数据的传输需要经过很多步骤.首先有相互沟通的意向,然后还要有沟通的通道:通过电话还是面对面交流(物理链路).最后,两个人说话的 ...

  8. java.lang.NoSuchMethodError的解决办法

    开发一个知识图谱在线服务(基于springcloud+vue)构建中医理论的知识图谱构建帕金森的知识图谱提供免费的知识图谱服务,希望能为朋友们的生活.学习.工作提供帮助(敬请期待)PS:关注后,点击头 ...

  9. python-OpenCV 使用GrabCut来实现图片的前景与后景的分割

    先上一个效果图: 使用Python3.7+OpenCV 3.x. 需要引入 numpy库. 在图上用鼠标左键和右键标记前景和后景即可.如果需要重新标记图像,关闭程序重新运行. 以下是具体实现代码. # ...

  10. Arduino IDE 开发 ESP-01S/ESP-01物联网实战检测温度湿度上传MQTT服务器

    一.硬件准备 USB转ESP8266两块.DHT11温度湿度传感器.ESP8266-01/ESP8266-01一块(如果学习的话多买几块,ESP-01/ESP-01S的区别) USB转ESP8266 ...