<div class='triangle-rihgt'></div>
<div class='triangle-top'></div>
<div class='triangle-left'></div>
<div class='triangle-bottom'></div>
.triangle-rihgt{
width: 0;
height: 0;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-left: 20px solid red;
}
.triangle-left{
width: 0;
height: 0;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-right: 20px solid green;
}
.triangle-top{
width: 0;
height: 0;
border-right:10px solid transparent;
border-left:10px solid transparent;
border-bottom: 20px solid #333;
}
.triangle-bottom{
width: 0;
height: 0;
border-right:10px solid transparent;
border-left:10px solid transparent;
border-top: 20px solid #999;
}

  

css三角形

 
 
 
 

css 画三角形的更多相关文章

  1. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  4. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

  5. 如何用CSS画三角形

    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...

  6. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  7. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

  8. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...

  9. css画三角形,梯形

    (根据调节边框的宽度来调节三角形形状) <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  10. 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明

    网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...

随机推荐

  1. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  2. javaee IO流复制的方法

    package Zjshuchu; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileN ...

  3. javaee utf-8文件的转换

    package Zy; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.Fil ...

  4. eas之排序接口

    KDTable目前本身并不支持排序功能,但提供了排序的接口,用户通过实现该接口(ISortManager)即可实现排序的功能.同时KDTable提供了一个简单实现KDTSortManager,这个类完 ...

  5. VIM 使用 匹配替换命令配合表达式 实现 递增替换

    :let n=100 | g/while/s/\d/\=n / | let n=n+1 before 10 void *thread_function_1(void *arg) { 11 int i; ...

  6. Spring Boot-热部署和Debugger使用(三)

    热部署 1.添加热部署pom依赖 <!--热部署插件依赖jar包--> <dependency> <groupId>org.springframework.boot ...

  7. 【ACM】hdu_zs1_1004_第二小整数_201307271529

    第二小整数 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other)Total Submissi ...

  8. SWT中嵌入Swing的JTextFeild却不能编辑

    SWT中嵌入Swing的JTextFeild却不能编辑 学习了:http://www.iteye.com/problems/49487   膜拜一下 org 竟然有这样的坑,需要在中间添加一个JApp ...

  9. javascript学习笔记(一)-廖雪峰教程

    一. 基础 1.for in,for of和forEach 遍历的是对象的属性,因为数组也是对象,其内部的元素的索引就是其属性值.用该方式遍历数组就是获取了数组中的每一个元素的索引值(从0開始). 而 ...

  10. Python——迭代器和解析(3)

    用迭代工具模拟zip和map ====================================================================== 我们已经知道了zip怎样组合 ...