<!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. jboss性能优化

    jboss     linux jboss 部署时优化设置: 在/conf/web.xml中通过参数指定: <session-config>          <session-ti ...

  2. angular $emit发送 后退时$on多次接收

    angular 并列作用域,作用域不存在上下级关系,$scope.$emit发送时 后退时$rootScope.$on会出现接收多个消息的情况 $rootScope.$on('saveDraft', ...

  3. （总结）Nginx配置文件nginx.conf中文详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  4. Jint .net平台的javascript引擎

    使用需求 有时候一段Javascript代码写的很棒,而我们又无法将之翻译成.net或翻译之成本很高的时候 我们就可以使用Jint引擎来运行Javascript代码,来得到我们想要的结果 或者上 ht ...

  5. IBatis 批量插入数据

    sql语句 <!--批量插入待收流水--> <insert id="BatchInsertOrder" parameterClass="ArrayLis ...

  6. Git创建ssh-key

    打开git bash界面,输入: ssh-keygen -t rsa -C "yourname@email.com" 一路回车,后续保持默认值即可. 把C:\users\yourn ...

  7. 给ubuntu的docky添加可以直接打开的图标

    在/usr/share/applications和/usr/share/app-install/desktop寻找需要的图标,没有就自己做一个 eclipse的图标 [Desktop Entry] V ...

  8. linux 开机启动过程详解

    Linux开机执行内核后会启动init进程,该进程根据runlevel(如x)执行/etc/rcx.d/下的程序,其下的程序是符号链接,真正的程序放在/etc/init.d/下.开机启动的程序(服务等 ...

  9. Linux下开发常用 模拟 Http get和post请求

    1.get请求 curl "http://www.baidu.com"      如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "htt ...

  10. Iframe 在项目中的使用总结

    参考:http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html 问题一:首先我们用iframe加载页面,第一个需要解决的问题是高度自适应 ...