<!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. log4net配置和获取ILog实例

    名称 描述 File 文件路径,如果RollingStyle为Composite或Date,则这里设置为目录,文件名在DatePattern里设置,其他则这里要有文件名.已经扩展支持虚拟目录 Roll ...

  2. hdu 2037 - 今年暑假不AC（区间调度问题）

    题意:区间调度问题 解法:应用贪心算法,贪心的规则: 在可选的节目中,选取结束时间早的节目. 1: #include<stdlib.h> 2: #include<string.h&g ...

  3. 1 NFS高可用解决方案之DRBD+heartbeat搭建

    preface NFS作为业界常用的共享存储方案,被众多公司采用.我司也不列外,使用NFS作为共享存储,为前端WEB server提供服务,主要存储网页代码以及其他文件. 高可用方案 说道NFS,不得 ...

  4. python redis使用心得

    发布与订阅 连接池代码 redis_conn.py import redis REDIS_CONN = { 'HOST': '192.168.1.11', 'PORT': '6378', 'DB': ...

  5. Jquery 基本知识(一)

    1. DOM对象:通过例如getElementById方法获取到DOM树中的元素就是DOM对象 jQuery对象:通过jQuery包装DOM对象后产生的对象 --- 注意:jQuery对象和DOM对象 ...

  6. css3实现小黄人

    效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <m ...

  7. Java简单的系统登陆

    class Check{ public boolean validate(String name,String password){ if(name.equals("lixinghua&qu ...

  8. MBProgressHUD+FastCall

    + (void)showHudTipStr:(NSString *)tipStr; + (void)showHudTipStr:(NSString *)tipStr{ ) { MBProgressHU ...

  9. python中，ascii,unicode,utf8,gbk之间的关系梳理

    在计算机中,经常遇到编码问题,本节主要梳理下ascii,unicode,utf8,gbk 这几种编码之间的关系. ASCII 计算机中,所有数据都以0和1来表示.在一开始的时候,要表示的内容比较少,人 ...

  10. mysql优化--触发器和auto_increment

    1.触发器: 触发器的好处:做数据回收站或者做数据关联删除 触发器的坏处:给数据库增加压力,增删改变慢,不利与mysql移到其他数据库会出问题. 触发器建立:只能增删改,查不能建立. 例子1:创建一个 ...