关键词：
在写网页的过程中，有时我们需要用到一些简单的图片但是手头又没有合适的，我们其实可以自己来写，下面我就简单的介绍几个例子：
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规则绘制各种常见的图形：从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。 这种绘图方式主要用到了两类技巧：一是使用伪元素，二是设置图形的边框。特别是边框的使用，非常巧妙... 查看详情
怎么用几何画板作一些简单的图形
...生不爱学习，甚至是认为有些课程太枯燥，没耐心，对待一些抽象的课程很是厌烦，例如数学，这门课程中的几何部分关键是靠学生的想象力，如果他们想不出来的话，老师们最好是找一些实体图形，多看看，多动手做些几何拼... 查看详情
自己主动图片生成在前端开发中的一些尝试
...图的效率。我们讨论还有一个问题：怎样处理设计稿中的一些简单图形。不知道你又没有遇到过这样的烦恼：“设计师给你的精致的PSD中有一个简单图形，就是那用用多边形、圆形和线条组成的图形。这个图形用css3实现不了，... 查看详情
用css绘制最常见的40种形状和图形
...com/post/40-css-shapes.html今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。Square(... 查看详情
用css来写一个背景图片的切换
代码如下：<!DOCTYPEHTML><htmllang="en-US"><head><metacharset="UTF-8"><title>CSS3FullBackgroundSlider</title><styletype="text/css">/*字体效果*/@importurl("http://www.w3 查看详情
利用噪声构建美妙的css图形
在平时，我非常喜欢利用CSS去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个10x10的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：虽然利用了... 查看详情
canvas入门(代码片段)
...疑惑，那不妨先问自己一个问题：当你需要在网页上展示一些形状的时候，你会怎样做？面对一些简单的形状（点、直线、矩形、直角三角形等）且在仅用于展示的情况下，其实用HTML配合CSS就可以完成。对于CSS有一定了解的话... 查看详情
css实现一些图形
css做的一些图形。要先理解一个基础：css边框相接触的地方是45度平分空间的。#k{width:20px;height:30px;border:40pxsolid;border-color:redgreenyellowblue;} 图形一：1#talkbubble{2width:120px;3height:80px;4background:red;5position:relative; 查看详情
c的图形界面开发库，可借助xml和css构建简单的跨平台桌面应用
...因为LCUI对XML、CSS以及元素布局等的处理方式和浏览器有一些相似的地方，你可以参考左侧的示例代码了解大致效果。LCUI的主要用途是方便作者开发简单的图形界面应用，简单也就意味着功能很少，比如：如今可参考的同类开源... 查看详情
css表格没数据tbody
...格就隐藏那些单元格，不用担心跨列的问题当然如果用js来写的话，也是可以的，但是麻烦一些，用class是最简单的 查看详情
怎么用css来写div的内边框颜色宽度？
border:#FF00002pxdashed;这是表示边框的颜色。怎么用CSS来写DIV的内边框颜色宽度？border:#FF00002pxdashed;这是表示边框的颜色。块级区域里的颜色设置,一般只有边框和背景色两种.边框的颜色就是你列出的border属性,而你所说的内边框,我... 查看详情
如何使用纯css3创建一个简单的五角星图形
...。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。首先我们... 查看详情
用css绘制最常见的形状和图形
#rectangle{width:200px;height:100px;background:red;}#circle{width:100px;height:100px;background:red;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}/*可以使用百分比值(大于50%)，但是低版本的Andro 查看详情
用dart来写objective-c代码(代码片段)
问题背景先说说为什么会有开发效率的问题。Flutter的跨平台多适用于UI等上层需求，本来是可以提升开发效率的。但是诸如LBS、系统和设备信息、获取相册等常用功能都需要两端去写很多Native代码。 最终原本的『两端开发』... 查看详情
为啥ubuntu系统文件打开或者程序打开的速度总觉得比xp系统慢一拍？
...me是完整的桌面环境,资源占用很高,gnome,xfce,openbox..都用gtk来写,kde用qt来写,gtk是c的库,qt是c++的库,相对来 查看详情
linux第七节课
...课，我理解的是一些比较简单的项目是可以用if判断语句来写的；例如只有2个到3个需要判断则可以用if来写，要用 查看详情
wpf用三角形网格构建三维图形
...该较为好办，像Image控件，Shape类型等，或者我们常用的一些控件，都可以放进三维空间中，用这种方式构建模型可能更为实用，也好弄（至少不借助专门的建模工具的前提下）。2、完全利用坐标建模。实际上是用N个三角形来组... 查看详情
css3linear-gradient线性渐变实现虚线等简单实用图形
一、作为图片存在的CSS3gradient渐变我觉得CSS3Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚... 查看详情