在写网页的过程中,有时我们需要用到一些简单的图片但是手头又没有合适的,我们其实可以自己来写,下面我就简单的介绍几个例子:

1.上三角

Triangle Up

#triangle-up {

width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

2.下三角

Triangle Down

#triangle-down {

width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

3.左三角

Triangle left

#triangle-left {

width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

4.右三角

Triangle right

#triangle-right {

width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

5.左上直角

Triangle Top Left

#triangle-topleft {

width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

6.右上直角

Triangle Top Right

#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

7.左下直角

Triangle Bottom Left

#triangle-bottomleft {

width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }

8.右下直角

Triangle Bottom Right

#triangle-bottomright {

width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }

最后来一个稍微复杂一点点的

十字架

Cross

#cross {

background: red; height: 100px; position: relative; width: 20px; } #cross:after { background: red; content: ""; height: 20px; left: -40px; position: absolute; top: 40px; width: 100px; }

用css来写一些简单的图形的更多相关文章

  1. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  2. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  3. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇(昨天有个群友表示写的简单了点,然后我无情的把他的抄了一遍)

    某个群友 http://www.cnblogs.com/coco1s/   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础 ...

  4. 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  5. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

  6. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

    前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可 ...

  8. 用C写一个简单的推箱子游戏(一)

    我现在在读大二,我们有一门课程叫<操作系统>,课程考查要求我们可以写一段程序或者写Windows.iOS.Mac的发展历程.后面我结合网上的资料参考,就想用自己之前简单学过的C写一关的推箱 ...

  9. 写一个简单的HTML留言板

    最近有点懒,没码什么字,防止遗忘,从头开始码,写一个简单的HTML留言板.包含两个文件,book.html还有style.css,放在同一目录下. book.html 1 <!DOCTYPE h ...

随机推荐

  1. 通俗易懂的 JSon解析处理

    1.主要用到的类: 主要用到了JavaScriptSerializer类,该类在System.Web.Script.Serialization命名空间(在System.Web.Extensions.d ...

  2. 解析 Json 相关

    statusJson sj = new statusJson() { ShipmentNum = "555555", Status1 = "05", Wareh ...

  3. Python小练习四

    # 使用给定的宽度打印格式化后的价格列表 width = (int)(input('Please enter width:')) price_width = 10 item_width = width ...

  4. js创建对象的几种方式

    /** * 顺便重温一下对象的创建方式 * 代码简单说明问题就好 * 概念性的东西这里就不提了,只加上自己简单理解 */ /** * 工厂模式,就是将手动的创建细节封装在一个方法里, * return ...

  5. mysql 查询每个班级成绩前两名

  6. java中FileInputStream和FileOutputStream对图片操作的例子

    package a.ab; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.F ...

  7. 21)pom 中的缺省值(default properties)

    1 引言 项目中build 时用到了maven-jar-plugin ,其中有一个 ${project.build.directory} <plugin> <artifactId&g ...

  8. new的原罪

    一直以为在开发阶段能够直接调用的,速度而言一定是最优秀的,因为总比后期通过反射之类来调用来得快吧. 下面请看一个SB的例子,重新编译以后,这个类在创建100,000,000实体时居然耗费了16秒的时间 ...

  9. java 类反射记录

    Class的getDeclaredMethod方法是获取当前类下的所有方法,包括private修饰的,该方法不获取父类的方法. getMethod获取父类及本类下的所有public方法.

  10. Linux环境下中文字体乱码处理办法

    项目中包含了一项生成JPG图片的功能,该功能需要使用JAVA的Graphics2D动态生成图片中的文字,原来在Windows平台中没有发现问题,但是迁移至Linux平台后发现生成的中文变成了乱码. 百 ...