要实现三角的效果有很多方法：

例如下面的页面就需要三角：

其中，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 0;

            height: 0;

            border-top: 10px solid transparent;

            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            border-bottom: 10px solid skyblue;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

最后通过定位的方法放到合适的位置

CSS-画三角的更多相关文章

  1. css画三角的原理

    当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变, ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  6. 用div画三角/矩形/圆

    1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  7. 用CSS画基本图形

    用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下:   #recta ...

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

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

  9. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  10. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

随机推荐

  1. Django项目订单接入支付宝

    1.首先下载所需要的包 pip install python-alipay-sdk 2.在视图函数里面引入所需要的类 from alipay import AliPay 3.利用这个类创建一个实例对象 ...

  2. Django入门之基础篇01

    这是第一篇Django(花音:浆够)入门博客,学习Django的初衷是为了开发自己的个人小小网站(虽然有了博客园,还是想建立自己的博客,因为自主定制,香香香~!)

  3. <数据库>MySQL补充（ 查询）

    show create table 表名 \G;(查看创建的属性) alter table 表名 auto_increment=xx;(修改自增起始值) set session auto_increm ...

  4. C++面向对象高级编程（下）第二周-Geekband

    17,对象模型:关于vptr(vitrual Pointer)和vtbl(virtual Table) 当存在虚函数就会出现虚指针vptr指向虚函数所在位置vtbl 将vptr实现vtbl内容翻译为C ...

  5. Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值

    您需要在二叉树的每一行中找到最大的值. 示例: 输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [1, 3, 9] class Solution { public: vector<i ...

  6. C/C++编译的程序内存组成：

    #include int main(){int a[1000000];//局部变量return 0;}编译运行后发现溢出错误.#include int a[1000000];//全局变量int mai ...

  7. 在Apline编译Mariadb 常见错误

    /root/mariadb-10.3.11/storage/tokudb/PerconaFT/portability/toku_assert.cc:52:22: fatal error: execin ...

  8. phpmyadmin连接远程mysql

    phpmaadmin连接远程mysql连接远程mysql步骤.保证已经有�phpmyadmin,如果没有,去http://www.phpmyadmin.net/home_page/downloads. ...

  9. python进阶_浅谈面向对象进阶

    python进阶_浅谈面向对象进阶 学了面向对象三大特性继承,多态,封装.今天我们看看面向对象的一些进阶内容,反射和一些类的内置函数. 一.isinstance和issubclass  class F ...

  10. Filter - 全局编码 (装饰者模式)

    Tomcat7以前需要处理get乱码,tomcat8以后不需要处理get乱码,因为tomcat内部会处理. 乱码原因: package cn.itcast.web.filter; import jav ...