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

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

其中，

<!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. string字符串 获取指定位置范围的子字符串

    string   str1="12345678";   str1.Substring(0,4);其中0表示要取得字符串的起始位置,4就是要取得字符串的长度  结果是 "1 ...

  2. MyEclipse设置 web访问根路径

    使用鼠标右键点击项目(点击属性properties)进入如下图:

  3. Unity 用代码设置UGUI的渲染层级

    用代码设置UGUI渲染无非和三个API有关: 1.SetAsFirstSibling(); 2.SetAsLastSibling(); 3.SetSiblingIndex(n) SetAsFirstS ...

  4. 定时运行某个php文件的bat文件

    1.bat C:\phpStudy\php54n\php.exe -q D:\WWW\wdysp.zhuwangkj.com\wap\user_ABCD_grade.php pwd=6666sqwdw ...

  5. webpack配置根据浏览器自动添加css前缀的loader

    1.安装 postcss-loader autoprefixer npm install postcss-loader autoprefixer --save-dev 2.配置webpack.conf ...

  6. linux学习(一)-----vm、centos安装

    安装vm和Centos 1)先安装 virtual machine ,vm12 2)再安装 Linux (CentOS 6.8) 3)原理示意图,这里我们画图说明一下 VM 和 CentOS 的关系. ...

  7. MYSQL数据库练习题操作（select）大全

    1.创建表 表一:student学生use) .create table student( sno ) primary key not null comment'学号(主码)', sname ) no ...

  8. 关于Python脚本开头两行的：#!/usr/bin/python和# -*- coding: utf-8 -*-的作用 – 转

    #!/usr/bin/python 是用来说明脚本语言是python的 是要用/usr/bin下面的程序(工具)python,这个解释器,来解释python脚本,来运行python脚本的. # -*- ...

  9. Java程序员面试题收集（6）

    <!————————————————————————————基础题122道,代码题19道————————————————————————————> JAVA相关基础知识1.面向对象的特征有 ...

  10. 使用Maven编译运行Storm入门代码(Storm starter)(转)

    Storm 官方提供了入门代码(Storm starter),即 Storm安装教程 中所运行的实例(storm-starter-topologies-0.9.6.jar),该入门代码位于 /usr/ ...