<!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. mysql 某周的起始和结束日期

    转自:http://bbs.csdn.net/topics/370096126 t_table有数据如下:year    Week2011    22011    32011    42011     ...

  2. collectionView

    // /* UICollectionView 类是iOS6 新引进的API,用于展示集合视图, 布局更加灵活,可实现多列布局,用法类似于UITableView类. - 更新视图: [collectio ...

  3. restClient访问SSL

    IRestClient client = new RestClient("https://xxx.com/aa/bb"); "; ); ServicePointManag ...

  4. MySQL------MySQL与SQLServer数据类型的转换

    MySQL SQLServer

  5. 9月23日JavaScript作业----用DIV做下拉列表

    例题二.用div做下拉列表 <title>无标题文档</title> <style type="text/css"> *{ margin:0px ...

  6. C- 流程控制（顺序结构，选择结构，循环结构）

    一.选择结构 1.if 特点: 同一时刻,只有一个大括号里面的代码会被执行 2,switch 特点 默认情况下,只有一个case后面的代码会被执行 如果一个case后面没有break,而且这个case ...

  7. Yii2.0 实现的短信发送

    原文地址:http://www.phpxs.com/post/4245/ yii2-smserGithub项目主页 https://github.com/daixianceng/yii2-smser ...

  8. webstorm总结

    webStorm修改文件类型,文件着色 File->Settings->Editor->File Types

  9. APACHE POI教程 --java应用程序用POI与Excel交互

    POI报表 --用POI与Excel交互 AURISOFT 第一章 POI简介 --Jakata Poi HSSF:纯java的Excel解决方案 在我们实际的开发中,表现层的解决方案虽然有多样,但是 ...

  10. jquery mobile常用的data-role类型 data-icon data-iconpos

    文章链接: http://blog.csdn.net/cainiaoxiaozhou/article/details/48521241