三角形

  1. .graph:before{ content: ""; display: block; height:; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: transparent transparent red; }

等腰三角形(只用修改border-width属性值就可以了)

  1. .graph:before{ content:""; display:block; width:; height:; border-width:0px 300px 100px; border-style:none solid solid; border-color:transparent transparent red; }

直角三角形

  1. .graph:before{ content:""; display:block; width:; height:; border-width:0px 0px 200px 200px; border-style:none solid solid; border-color:transparent transparent red; }

梯形

  1. .graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 20px 60px 145px;content:"";display:block;height:;left:-10px;width:200px;}

等腰梯形

  1. .graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 45px 45px;content:"";display:block;height:;left:-10px;width:200px;}

等腰梯形旋转

  1. .promotion-contain2 {
  2. content:"";
  3. display:block;
  4. height:;
  5. border-width:0px 15px 15px;
  6. border-style:none solid solid;
  7. border-color:transparent transparent red;
  8. position:absolute;
  9. -moz-transform:rotate(-45deg);/*FF浏览器*/
  10. -webkit-transform:rotate(-45deg);/*chrome浏览器*/
  11. -o-transform:rotate(-45deg);/*oprea浏览器*/
  12. -ms-transform:rotate(-45deg);/*IE浏览器*/
  13. left:-10px;
  14. top:17px;
  15. width:40px;
  16. }

CSS 实现三角形、梯形、等腰梯形的更多相关文章

  1. 各种demo:css实现三角形,css大小梯形,svg使用

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  2. 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  3. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

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

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

  6. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  7. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

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

  8. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  9. CSS实现三角形

    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...

  10. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

随机推荐

  1. 转载——SQL Server数据库性能优化之SQL语句篇

    转载自:http://www.blogjava.net/allen-zhe/archive/2010/07/23/326927.html 1. 按需索取字段,跟“SELECT *”说拜拜 字段的提取一 ...

  2. C#Log4net日志记录组件的使用

    一.Log4Net介绍 Log4net是基于.NET开发的一款非常著名的记录日志开源组件.它通过一套XML配置的日志引擎,将日志分不同的等级,分别是:FATAL . ERROR. WARN. INFO ...

  3. channel c3 disabled, job failed on it will be run on another channel

    今天执行备份时,报错: allocated channel: c3 channel c3: sid=131 instance=orcl2 devtype=DISK   RMAN-03009: fail ...

  4. easyui之combobox(不定时补充)

    1,combobox的valuefeild和textfeild这两个属性,可以理解为键值对,即:键valuefeild:值textfeild textfeild是文本框内显示的值,如果要取文本框内的值 ...

  5. uva 10038 - Jolly Jumpers

    #include <iostream> #include <cstdio> #include <stdlib.h> using namespace std; ], ...

  6. 工作中遇到的浏览器差别(就不叫IE6bug了)

    1.根据ie版本写css <!--[if lt IE 8]> <style> .cntContainer{margin-top: -1px;} </style> & ...

  7. Content-Disposition的作用及用法

    Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件.Content-disposition其实可以控制用户请求所得的内容存为一个 ...

  8. 一个图片上传的servlet,传到本地磁盘,要传到服务器请修改

    本来想写个controller,结果拦截器把图片拦住了,那就直接servlet public class UploadEamge extends HttpServlet{ /** * */ priva ...

  9. 使用Keil软件编写汇编源程序应注意事项

    1)一定要使用微软的txt文本编辑器,否则键入逗号时编译通不过.应该是这个样('),不该是这个样(,). 2) 用数字做标号时,前面一定要加一个英文字母,否则编译通不过. 3) 有时编译通过的.asm ...

  10. leetcode_question_112 Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...