【css制作的各种图形】的更多相关文章

css制作的各种图形

1.六角形的制作: 代码: #star-six{ height:0; width:0; border-bottom:100px solid red; border-left: 50px solid transparent; border-right:50px solid transparent; position: relative; } #star-six:after{ width:0; height:0; border-top:100px solid red; border-left:50p…

CSS制作图形速查表

很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果.(最早发现使用border制作三角形是人物Eric Meyer的发现的)下面就让我给大伙罗列一下子. .css-arrow-multicolor { border-color: red green blue orange; border-style:solid; border…

【转】CSS制作图形速查表-存档

  http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/css-create-irregular-shapes.html 通过图片实现不规则DIV http://www.cnblogs.com/leshao/p/5674720.html 通过after+旋转实现 1.正方形(square): CSS Code: .square { width: 100px…

【01】CSS制作的图形

[01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:after.     绘制爱心:         矩形,加圆角,加旋转.   绘制倒8:         显然是:三个角是圆角.然后旋转.     绘制开心笑:   四个角圆角.然后右border-right为透明即可.     代码如下:   <!DOCTYPE HTML> <html>…

利用CSS制作图形效果

前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型的CSS,只要它至少在一个浏览器中支持. 一. 实现一个心形 #heart { position: relative; width: 100px; height: 90px; } #heart:before{ position: absolute; content: ""; left: 5…

CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对…

纯CSS制作冒泡提示框

来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html 在此基础上,今天分享一篇文章给大家,如果利用CSS制作冒泡提示框. 先看2张效果图: CSS: /* 对话气泡 用法:使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble-top&…

18个你可能不相信是用CSS制作出来的东西

与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会. 浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥.下面是18个人们用CSS创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在CSS上. 1. The Simpsons Chris Pattle使用纯CSS创建了S…

好程序员web前端分享18个用CSS制作出来的东西

好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会. 浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥.下面是18个人们用CSS创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在CSS上. 1.TheSimpson…

CSS制作三角形和按钮

CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中,也会有这样的三角形, 当鼠标经过时,三角形会垂直翻转,如下: 现在我分享制作三角形的做法,主要是利用边框做成的, 首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形. 源代码: <!DOCTYPE html> <html lang="en">…