用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. Blogs添加横幅滚动条

    #1.定义CSS样式 .box { width: 100%; margin: 0 auto; /* border: 0.2px solid gray; */ overflow: hidden; } . ...

  2. Java进阶专题(二十) 消息中间件架构体系（2）-- RabbitMQ研究

    前言 接上文,这个继续介绍RabbitMQ,并理解其底层原理. 介绍 RabbitMQ是由erlang语言开发,基于AMQP(Advanced Message Queue 高级消息队列协议)协议实现的 ...

  3. STM32F103的CAN结构体学习

    使用STM32F103的CAN通信就是用这4个结构体函数,把他们理解透了,CAN就好用了 CAN的结构体定义在stm32f10x_can.h里面 /************************** ...

  4. phaser3入门教程-从零开始开发一个打砖块游戏

    项目代码 项目代码 体验一下 空格开始,左右箭头控制移动 体验一下 Phaser简介 Phaser是一个HTML5游戏框架.它使用了许多HTML5 API,例如Canvas,WebGL,Audio,G ...

  5. java解析导入excel表格转为实体类javabean，根据实体类中的中文名称

    最近公司需求解析excel,一开始使用poi做的挺好的,后来直接上了几十万条数据的excel文件,内存直接溢出了,网上查到apache poi还提供了专门处理海量数据的方法,使用sax解析,果然用了内 ...

  6. 支付业务优化else if 代码

    背景 最近在做项目的时候,需要接入支付.由于接入第三方支付而且还不知止一家,需要接入很多家.比如说支付宝.微信.富友支付等.每家支付都一个回调.现如今的代码,根据不同的第三方支付一大堆else if判 ...

  7. VC维相关知识

    假设空间H(Hypothesis Set) 输入空间D(X1...Xn) 1.增长函数(grown function) 是关于输入空间尺寸n的函数 假设空间对于D中所有实例实现分类(赋予标记)的分类方 ...

  8. git基础-git别名

    Git 并不会在你输入部分命令时自动推断出你想要的命令. 如果不想每次都输入完整的 Git 命令,可以通过 git config 文件来轻松地为每一个命令设置一个别名. 这里有一些例子你可以试试: $ ...

  9. 5.汇编实现裸机LED

    首先:操作LED就要操作GPIO  alpha的芯片是NXP的IMX6ULL  其GPIO和STM32的命名有所区别 可以看到IMX6ULL的GPIO以其功能进行命名,对应上图中PAD之后的部分 即G ...

  10. idea或者java远程提交spark任务到yarn,Exception1

    spark通過idea远程提交job到yarn: Caused by: java.lang.ClassCastException: cannot assign instance of scala.co ...