用css来写一些简单的图形
在写网页的过程中,有时我们需要用到一些简单的图片但是手头又没有合适的,我们其实可以自己来写,下面我就简单的介绍几个例子:
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来写一些简单的图形的更多相关文章
- CSS代码写出的各种形状图形
做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...
- 教你用CSS代码写出的各种形状图形
做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇(昨天有个群友表示写的简单了点,然后我无情的把他的抄了一遍)
某个群友 http://www.cnblogs.com/coco1s/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础 ...
- 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看
使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...
- CSS背景图像的简单响应
本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)
前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可 ...
- 用C写一个简单的推箱子游戏(一)
我现在在读大二,我们有一门课程叫<操作系统>,课程考查要求我们可以写一段程序或者写Windows.iOS.Mac的发展历程.后面我结合网上的资料参考,就想用自己之前简单学过的C写一关的推箱 ...
- 写一个简单的HTML留言板
最近有点懒,没码什么字,防止遗忘,从头开始码,写一个简单的HTML留言板.包含两个文件,book.html还有style.css,放在同一目录下. book.html 1 <!DOCTYPE h ...
随机推荐
- 17.iOS App设置icon,启动图,App名称的方法
icon:选择Assets-->AppIcon-->将各种尺寸的icon拖拽到相应的框中. APP名称:选择info-->Bundle name,修改APP名字. 启动图: 首先点击 ...
- Linux 忘记root登录密码解决方法
很多朋友经常会忘记Linux系统的root密码,linux系统忘记root密码的情况该怎么办呢?重新安装系统吗?当然不用!进入单用户模式更改一下root密码即可. 步骤如下: 重启linux系统 3 ...
- Linux 如何使用压缩与解压缩的方式将Windows下的zip压缩包上传到Linux系统
当我们无法使用xftp方式上传文件到Linux系统时,我们可以使用在Windows下压缩文件夹,然后到Linux系统下解压缩的方式,完成整个上传工作. 第一步:在Windows系统下,将整个文件夹压缩 ...
- JS-Dom概念
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- loadrunner监控linux服务器
参考http://www.cnblogs.com/yangxia-test/archive/2012/11/27/2790771.html http://www.cnblogs.com/candle8 ...
- A very cool thing: Install MYSQL from source without root access on LINUX
最近由于工作的需要,要在centos上安装MYSQL服务器.作为一名小兵中的小兵,当然是没有root权限的,为了能够使用mysql,只能使用源码安装了(因为binary安装方式似乎需要root acc ...
- 「2014-3-17」C pointer again …
记录一个比较基础的东东-- C 语言的指针,一直让人又爱又恨,爱它的人觉得它既灵活又强大,恨它的人觉得它太过于灵活太过于强大以至于容易将人绕晕.最早接触 C 语言,还是在刚进入大学的时候,算起来有好些 ...
- Ubuntu 安装mysql和简单操作
http://www.cnblogs.com/zhuyp1015/p/3561470.html ubuntu上安装mysql非常简单只需要几条命令就可以完成. 1. sudo apt-get inst ...
- java7笔记
1 switch case 增加字符串类型,原理根据字符串hashcode以及string.equal比较2 数值字面量改进 新增二进制数值字面量 0b000004,在数值中间新增下划线方便阅读200 ...
- EnTaroTassadar
著名的暴雪电影制片厂不久前推出了他的新作:电影虚空之遗附带的同名游戏的前三关战役.游戏的第一关中,一些星灵战士被莫比斯 俘虏了.而你(泽拉图)要去解救他们.解救的方法就是生产一些士兵,然后打败敌人.生 ...