<html>
<head>
<meta charset="UTF-8">
</head>
<style>
div{float:left;margin:0 40px;}
#div1{
width:0;
height:0;
border-top:40px solid black;
border-left:40px solid transparent;
border-right:40px solid transparent;

}

#div2{
width:0;
height:0;
border-left:40px solid red;
border-top:40px solid transparent;
border-bottom:40px solid transparent;
}

#div3{
width:0;
height:0;
border-bottom:40px solid blue;
border-left:40px solid transparent;
border-right:40px solid transparent;
}

#div4{
width:0;
height:0;
border-right:40px solid green;
border-top:40px solid transparent;
border-bottom:40px solid transparent;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

css三角形的更多相关文章

  1. 前端读者 | CSS三角形和饼图

    @羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...

  2. css三角形的实现

    实底三角形: <html> <head> <title></title> <style type="text/css"> ...

  3. [CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  4. CSS三角形广告文字

    街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...

  5. 纯css三角形

    三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...

  6. [HTML/CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  7. css三角形实现的几种方法的区别

    演变: .triangle{ height: 30px; width: 30px; display: inline-block; border: 30px solid; border-color: # ...

  8. css 三角形空心三角形的简单实现

    <style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px ...

  9. CSS三角形的实现原理及运用

    原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...

  10. CSS三角形/气泡的实现原理及应用

    记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂

随机推荐

  1. Scrum学习总结

    在学习的过程中,记录一些重要的东东,一为认真学习,作下归纳总结:二为以后查阅,好记性不如烂笔头!如果大家认为太简单,欢迎喷喷^_^ Scrum:一种迭代式增量软件开发过程,通常用于敏捷软件开发.Scr ...

  2. 二模01day1解题报告

    T1.音量调节(changingsounds) 有n个物品的背包(有点不一样,每个物品必须取),给出初始价值,物品价值可正可负(就是两种选择嘛),求可能的最大价值,不可能(<0或>maxs ...

  3. PCI Express（一）- Connector

    在FPGA4FUN上看到一篇介绍PCI-E的帖子,简单易懂,适合入门,特地搬过来 原文地址:http://www.fpga4fun.com/PCI-Express.html 前言: As PCI Ex ...

  4. mysql的从头到脚优化之数据库引擎的选择（转载）

    一. Mysql常用的存储引擎包括Innodb和Myisam以及memory引擎,但是最常用的莫过于Innodb引擎和MyISAM引擎,下边分别做下记录和比较: 下面思考下这几个问题: 你的数据库需要 ...

  5. oracle net manager的配置文件tnsnames.ora位置

    配置文件所在的路径:C:\app\Ling-PC\product\11.2.0\client_1\network\admin     (红色为安装的盘符位置)

  6. MFC CFileDialog用法例子。

     Set it to TRUE to construct a File Open dialog box. Set it to FALSE to construct a File Save As dia ...

  7. VC++ 限制窗口的大小范围的方法

    响应WM_GETMAXMININFO  的消息 处理之 void CMainFrame::OnGetMinMaxInfo(MINMAXINFO FAR* lpMMI) { // TODO: Add y ...

  8. 企业好助手U-Mail邮件服务器软件

    对于一家企业,最核心的是什么?有人说人才,有人说技术,也有人说是数据(信息),依小编来 看,这些答案都没错,人才会流动,技术在不断更新,唯有数据(信息),日积月累,将沉淀为公司历史的一部分,作为决策的 ...

  9. 在Hadoop-2.2.0集群上安装 Hive-0.13.1 with MySQL

    fesh个人实践,欢迎经验交流!本文Blog地址:http://www.cnblogs.com/fesh/p/3872872.html 软件环境 操作系统:Ubuntu14.04 JDK版本:jdk1 ...

  10. 使用soureTree删除分支

    使用心得 1:使用pull拉取时,自己本地的更改不会覆盖掉 2:删除分枝时,直接选中,可以直接删除远程的分枝