<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

        #trangle {

            display: inline-block;

            width: 200px;

            height: 200px;

            border-left: 100px solid #333;

            border-right: 100px solid #678;

            border-top: 100px solid #91b;

            border-bottom: 100px solid #eee;

        }

    </style>

</head>

<body>

    <span id="trangle"></span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

        #trangle {

            display: inline-block;

            border-left: 100px solid #333;

            border-right: 100px solid #678;

            border-top: 100px solid #91b;

        }

    </style>

</head>

<body>

    <span id="trangle"></span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

        #trangle {

            display: inline-block;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

            border-top: 100px solid #91b;

        }

    </style>

</head>

<body>

    <span id="trangle"></span>

</body>

</html>

把两边设置transparent透明就可以l，利用border的特性

用CSS画个三角形的更多相关文章

  1. 用css画出三角形

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

  2. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. 如何用css画出三角形

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

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

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

  5. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

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

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

  7. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  8. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

  9. Effective前端(3)用CSS画一个三角形

    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...

  10. CSS画出三角形（利用Border）

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

随机推荐

  1. JAva使用DOM读取XML数据(解析)

    原来一切都是有套路的 使用DOM解析XML文档步骤 1.创建解析器工厂对象 DocumentBuildFactory对象 2.由解析器工厂对象创建解析器对象,即DocumentBuilder对象 3. ...

  2. 启动和关闭ADB服务（adb start-server和adb kill-server）

    1  Android SDK中的常用命令行工具 在<Android SDK安装目录>\tools目录中带了很多命令行工具.虽然一般的开发人员并不需要完全掌握这些工具的使用方法,但了解这些工 ...

  3. PHP面向对象之朝花夕拾

    虽然平时都在用面向对象的思维编程.但是都是基于框架,很多技术细节一段时间不用就会逐渐模糊.拾遗部分:面向对象的三大特称:继承多态封装. 构造方法.__construct()  构造方法.再new的时候 ...

  4. 【原】web移动端常用知识点笔记

    摘要:因为平时搞移动端的比例多一点,做个小小的总结.虽然网上很多这方面的总结,不过还是想自己也总结一下,适合自己的才是最好的.这样也方便以后自己的查阅 viewport模板——通用 <!DOCT ...

  5. wpf arcglobe +c# 三维缩放到图层

    /// <summary>        /// 地图缩放到图层        /// </summary>        /// <param name="s ...

  6. Java 性能优化技巧集锦

    摘要: =================================== 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常 ...

  7. js022-高级技巧

    js022-高级技巧 本章内容: 使用高级函数 防篡改对象 Yielding Timers 22.1 高级函数 1.安全的类型检测 2.作用域安全的构造函数 构造函数实际上是一个使用new操作符调用的 ...

  8. SortedSet接口

    TreeSet中实现了SortedSet接口,此接口主要用于排序操作,即实现此接口的子类都属于排序的子类. import java.util.Set; import java.util.SortedS ...

  9. ecshop mobile 文件介绍

    mobile手机端 1.common位置:include\apps\default\common\ function.php show_message 成功跳转页面    其他页面引用  show_m ...

  10. C#异常类相关总结

    C#异常类相关总结 C#异常类相关总结 C#异常类一.基类ExceptionC#异常类二.常见的异常类1.SystemException类:该类是System命名空间中所有其他异常类的基类.(建议:公 ...