<!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. 第三次个人作业——关于K米(Andorid)的案例分析

    第三次个人作业--关于K米(Andorid)的案例分析 1.K米简介 官方网址:http://www.ktvme.com/ 2.评测 2.1.上手体验 带着找bug的心态,兴致勃勃地开始体验 K米.打 ...

  2. jQuery知识点总结（第三天）

    今天来总结剩余的选择器. 非常感谢评论区提问题的朋友们,有的错误是我笔误,有的问题则是知识点没有辨析解释清楚.只要有疑问,我们大家一同探究学习. 表单对象过滤选择器: ○ 选取所有可用的元素     ...

  3. JS-制作网页特效——选项卡效果（水平，点击）

    //总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式.后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div.把他们的样式去 ...

  4. 关键词提取1-C#

    C# 中文分词算法(实现从文章中提取关键字算法) using System;using System.IO;using System.Text;using System.Collections;usi ...

  5. Java排序算法——冒泡排序

    import java.util.Arrays; //================================================= // File Name : Bubble_S ...

  6. Java——不弹起的按钮组件：JToggleButton

    import java.awt.GridLayout; import javax.swing.JFrame; import javax.swing.JToggleButton; //========= ...

  7. 《CSS3实战》读书笔记 第2章 层叠样式表（CSS）

    ## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...

  8. 仿照jquery封装一个自己的js库（二）

    本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...

  9. Python 文件读写，条件循环（三次登录锁定账号实例）

    通过文件读写,条件循环相关语法,实现三次登录失败则锁定该账号的功能 需求一 """需求描述: 1.输入正确账号,密码,退出程序 2.登录失败,重新输入账号密码 3.同一账 ...

  10. 部署openssh服务器

    1.安装服务器端软件包 先查看是否已经安装openSSH服务器软件包 # rpm -qa|grep openssh openssh-askpass-.3p1-.el6_6..x86_64 openss ...