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

.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}

正如你看到的上面代码段是使用border制作的四个三角形,这些三角形都是直角三角形边界大小,如果你改变border-width的大小,你将得到的是另一个三角形

		.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}

当你改变border-style时,你会发现一些很神的效果:

		border-style: dotted;
	
 

但这种创意在不同的浏览器下并是支持的。

下面我们一起来通过代码,看看不同类型的制作方法

一、正方形(Square)

		#square {
width: 100px;
height: 100px;
background: red;
}

正方形是最简单的了,只需要保证元素的宽度和高度相同,这样就OK了。当然我们还可以使用border直接绘制正方形,具体如何绘制大家可以动脑想想,我就不写了,不过使用border绘制正方形,里面不能填充内容的哟。

效果:

二、长方形(Rectangle)

		#rectangle {
width: 200px;
height: 100px;
background: red;
}

在正方形的基础上改变他们的大小,确保width和height值不相同就行了。

效果:

三、圆形(Circle)

		#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

效果:

圆形的制作,我们采用的是CSS3中的border-radius属性。在制作过程中,有几点需要注意,其一宽度和高度值相同,其二圆角值为宽度或高度值的一半。也有地方提使用设置圆角值为50%,但我在Webkit中有碰到过不支持百分数的情况。

四、半圆形(Semicircle)

		#semicircle{
width: 100px;
height: 50px;
background: red;
-moz-border-radius: 100px 100px 0 0;
-webkit-border-radius: 100px 100px 0 0;
border-radius: 100px 100px 0 0;
}

制作半圆和圆使用的方法是一样的,但需要配合元素的高度,宽度以及圆角的方位,制作出半圆形效果。

效果:

五、扇形(Fan-Shaped)

		#fanShaped {
background: none repeat scroll 0 0 red;
-webkit-border-radius: 50px 0 0 0;
-moz-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
height: 50px;
width: 50px;
}

扇形在这里也就是四分之一圆效果,在制作四分之一圆和制作半圆形一样的,我们需要配合的就是元素的三个属性值,具体大家可以参考上面的代码。

效果:

六、椭圆形(Oval)

		#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

这里使用了border-radius的X/Y两轴取值,制作出一种变形的圆角,在配合宽度等值,就制作了类似椭圆形的一个效果。

效果:

七、三角效果(Triangle)

教程起就是说的三角效果,这里不在说是如何实现的,我在这里列出几种常见的三角形代码,仅供大家参考

1、三角朝上

		#triangle-up {
width: 0;
height: 0;
border: 50px solid red;
border-color: transparent transparent red;
}

border-bottom设置颜色

2、三角朝下

		#triangle-down {
width: 0;
height: 0;
border: 50px solid red;
border-color: red transparent transparent;
}

border-top设置颜色

3、三角向左

			#triangle-left {
width: 0;
height: 0;
border: 50px solid red;
border-color: transparent red transparent transparent;
}

border-right设置颜色

4、三角向右

			#triangle-right {
width: 0;
height: 0;
border: 50px solid red;
border-color: transparent transparent transparent red;
}

border-left设置颜色

5、左上三角形

		#triangle-topleft {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent red;
}

设置顶部和左边的颜色值。

6、右上三角

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

元素顶部和右边设置边框色

7、左下三角

		#triangle-bottomleft {
width: 0;
height: 0;
border: 100px solid red;
border-color: transparent transparent red red;
}

元素底部和左边设置边框颜色

8、右下三角

		#triangle-bottomright {
width: 0;
height: 0;
border: 100px solid red;
border-color: transparent red red transparent;
}

元素右边和底部设置边框颜色。

效果:

有关于三角形的制作,大家可以参考:《Creating Triangles in CSS》、《How to Create DIV Shapes Like Triangles and Circles 》、《CSS三角形的方法》、《Using borders to produce angled shapes》等。

八、平行四边形(Parallelogram)

		#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
background: red;
}

平行四边形是在矩形的基础上运用了一个CSS3transform属性。使用了变形效果。

效果:

九、六角星

		#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

这个六角星是使用了一个“:after”制作了另一个反方向的三角形,在定位层叠到一起,从而形成六角星,说白一点就是两个三角拼在一起变成了六角星。

效果:

十、五角星

		#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
content: '';
}

五角星制作,大家可以参考Kit MacAllister写的《CSS Only 5-Point Star》一文。

效果:

十一、心形

		#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); -
webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

效果:

十二、Pac-Man

			#pac-man {
width: 0px;
height: 0px;
border: 60px solid red;
border-color: red transparent red red ;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

效果:

十三、对话泡泡(Talk Bubble)

		#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}

有关于更多的对话泡泡的制作,大家还可以参考Nicolas的《Pure CSS speech bubbles》。

效果:

十四、Point Burst

		#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0; left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

效果:

十五、阴阳图

		#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position:
absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

效果:

上面的图形都是彩用CSS或者部分采用了CSS3的属性制作出来的,是不是很有意思呀,如果你喜欢这样的教程,大家还可以点击CSS3-Tricks提供的《The Shapes of CSS》里面展示了十多种图形的制作方法。由于部分图形效果使用了CSS3的部分属性,如果你还在使用IE的话,我建议你使用现代浏览器,比如:Mozilla FirefoxGoogle ChromeSafariOpera。上面展示的效果可能部分实用性不大,但是使用css制作三角和圆有效果应用还是很多了,特别是用来制作tips效果。

如需转载烦请注明出处:W3CPLUS

 
----------------------------------------------------------------------------------------------------------------------------------

为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对应查看。

1、正方形(square):

CSS Code:

		.square {
width: 100px;
height:100px;
background: #E5C3B2;
}

上面的方法是,设置宽度和高度一致就可以实现正方形的效果,下面展示一种boder制作正方形的效果:

		.square {
width:0;
height:0;
border: 50px solid #E5C3B2;/*边框大小等于正方形宽度(或高度)的一半*/
}

效果:

2、平行四边形(parallelogram)

CSS Code:

		.parallelogram {
width: 100px;
height: 70px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
background: #E5C3B2;
}

效果:

我们可以通过“skew”的值大小来控制角度,如果其值为负值,将会改变扭曲方向:

		.parallelogram2 {
width: 100px;
height: 70px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
background: #E5C3B2;
}

效果:

3、菱形(diamond)

CSS Code:

		.diamond {
width: 80px;
height: 80px;
margin: 40px 0 0 40px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
background: #E5C3B2;
}

效果:

4、长方形()

CSS Code:

		.rectangle {
width: 100px;
height: 50px;
background: #E5C3B2;
}

效果:

5、梯形(trapezoid)

梯形一

CSS Code:

		.trapezoid-1 {
height: 0;
width: 100px;
border-bottom: 100px solid #e5c3b2;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

效果:

梯形二

CSS Code:

		.trapezoid-2 {
height: 0;
width: 100px;
border-top: 100px solid #e5c3b2;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

效果:

梯形三

CSS Code:

		.trapezoid-3 {
height: 100px;
width: 0;
border-right: 100px solid #e5c3b2;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

效果:

梯形四

CSS Code:

		.trapezoid-4 {
height: 100px;
width: 0;
border-left: 100px solid #e5c3b2;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

效果:

6、三角形(triangle)

三角形朝上

CSS Code:

		.triangle-up {
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent transparent #e5c3b2 transparent;
}

效果:

三角朝右

CSS Code:

		.triangle-rihgt {
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent transparent transparent #e5c3b2;
}

效果:

三角朝下

CSS Code:

		.triangle-down {
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: #e5c3b2 transparent transparent transparent;
}

效果:

三角朝左

CSS Code:

		.triangle-left {
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent #e5c3b2 transparent transparent;
}

效果:

7、半圆(semicircle)

上半圆

CSS Code:

		.semicircle-top {
background: #e5c3b2;
height: 25px;
width: 50px;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
}

效果:

右半圆

CSS Code:

		.semicircle-right {
background: #e5c3b2;
height: 50px;
width: 25px;
-moz-border-radius: 0 0px 50px 0;
-webkit-border-radius:0 50px 50px 0;
border-radius:0 50px 50px 0;
}

效果:

下半圆

CSS Code:

		.semicircle-down {
background: #e5c3b2;
height: 25px;
width: 50px;
-moz-border-radius:0 0 50px 50px;
-webkit-border-radius:0 0 50px 50px;
border-radius:0 0 50px 50px;
}

效果:

左半圆

CSS Code:

		.semicircle-left {
background: #e5c3b2;
height: 50px;
width: 25px;
-moz-border-radius:50px 0 0 50px;
-webkit-border-radius:50px 0 0 50px;
border-radius:50px 0 0 50px;
}

效果:

8、圆(circle)

CSS Code:

		.circle {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 25px;
-webkit-border-radius:25px;
border-radius: 25px;
}

效果:

9、椭圆(oval)

水平椭圆

CSS Code:

		.ovalHor {
background: #e5c3b2;
height: 40px;
width: 80px;
-moz-border-radius: 40px/20px;
-webkit-border-radius:40px/20px;
border-radius: 40px/20px;
}

效果:

垂直椭圆

CSS Code:

		.ovalVert {
background: #e5c3b2;
height: 80px;
width: 40px;
-moz-border-radius: 20px/40px;
-webkit-border-radius:20px/40px;
border-radius: 20px/40px;
}

效果:

10、表图(chartColorful)

CSS Code:

		.chartColorful {
height: 0px;
width: 0px;
border: 50px solid red;
border-color: purple red yellow orange;
-moz-border-radius: 50px;
-webkit-border-radius:50px;
border-radius: 50px;
}

效果:

11、四分之一圆(quarterCircle)

四分之一圆(上)

CSS Code:

		.quarterCircleTop {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 50px 0 0 0;
-webkit-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
}

效果:

四分之一圆(右)

CSS Code:

		.quarterCircleRight {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 0 50px 0 0;
-webkit-border-radius: 0 50px 0 0;
border-radius:0 50px 0 0;
}

效果:

四分之一圆(下)

CSS Code:

		.quarterCircleBottom {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 0 0 50px 0;
-webkit-border-radius: 0 0 50px 0;
border-radius:0 0 50px 0;
}

效果:

四分之一圆(左)

CSS Code:

		.quarterCircleLeft {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 0 0 0 50px;
-webkit-border-radius: 0 0 0 50px;
border-radius:0 0 0 50px;
}

效果:

12、Chart(quarterCircle)

Chart(上)

CSS Code:

		.chartTop {
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-top-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

效果:

Chart(右)

CSS Code:

		.chartRight{
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-right-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

效果:

Chart(下)

CSS Code:

		.chartBottom {
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-bottom-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

效果:

Chart(左)

CSS Code:

		.chartLeft {
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-left-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

效果:

13、心形(heart)

左心形

CSS Code

		.heartLeft{
width: 0;
height: 0;
border-color: red;
border-style: dotted;
border-width: 0 40px 40px 0;
}

效果:

右心形

CSS Code

		.heartRight{
width: 0;
height: 0;
border-color: red;
border-style: dotted;
border-width: 0 0 40px 40px;
}

效果:

14、彩带(ribbon)

CSS Code

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

效果:

上面就用CSS制作的32种图形效果,当然大家还可以发挥你的想像和创造,制作一些更精美的图形。

https://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

https://www.w3cplus.com/css/create-shapes-with-css

CSS制作图形速查表的更多相关文章

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

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  2. IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width.之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在width下面,对于非IE浏览器会 ...

  3. HTML5速查表

    HTML5速查表 标签 描述 版本 属性 <!--...--> 定义注释 4 / 5 none <!DOCTYPE> 定义文档类型 4 / 5 none <a> 定 ...

  4. [翻译]Django速查表

    原文在此:https://code.djangoproject.com/wiki/DjangoCheatSheet Django速查表Django教程已经非常好了.这个速查表的作用是创建一个快速开始指 ...

  5. GNU Emacs命令速查表

    GNU Emacs命令速查表 第一章  Emacs的基本概念 表1-1:Emacs编辑器的主模式 模式 功能 基本模式(fundamental mode) 默认模式,无特殊行为 文本模式(text m ...

  6. 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版

    实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...

  7. HTML符号代码速查表

    HTML实体符号被用作实现保留字符(reserved characters)或者表达键盘无法输入的一些常用字符.在大多数浏览器中默认的字符集为ISO-8859-1.HTML实体符号使我们在网页设计中经 ...

  8. 简明 Git 命令速查表(中文版)

    原文引用地址:https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md在Github上 ...

  9. .htaccess下Flags速查表

    Flags是可选参数,当有多个标志同时出现时,彼此间以逗号分隔. 速查表: RewirteRule 标记 含义 描述 R Redirect 发出一个HTTP重定向 F Forbidden 禁止对URL ...

随机推荐

  1. CentOS 6.4下安装JIRA6.3.6破解汉化

    JIRA产品非常完善且功能强大,安装配置简单,多语言支持.界面十分友好,和其他系统如CVS.Subversion(SVN).VSS.LDAP.邮件服务整合得相当好,文档齐全,可用性以及可扩展性方面都十 ...

  2. C++中文件流操作

    一.C++中流和流操作符 C++中把数据之间的传输操作称为流,流既可以表示数据从内存传送到某个载体或设备中,即输出流,也可以表示数据从某个载体或设备传送到内存缓冲区变量中,即输入流.C++输入输出除了 ...

  3. 13 Timer和TimerTask 示例

    定时器是一个应用十分广泛的线程工具,可用于调度多个定时任务以后台线程的方式执行.在Java中,可以通过Timer和TimerTask类来实现定义调度的功能 1 Timerjava.lang.Objec ...

  4. Firebird 安装多实例

    火鸟数据库的安装向导,默认不允许多实例. 但是不管出于什么原因,若想安装多实例,很简单. 1.先用安装文件,按照向导安装第一个实例. 2.安装后不要启动服务,根据需要配置好Firebird.conf. ...

  5. lodop打印多页

    定义全局变量 var loop = null; 加载时候打印 window.On_CLodop_Opened = function () { print(); //OpenPreview()是调用打印 ...

  6. 【8】memcached实例

    一.memcached环境搭建 1.下载后解压到D:\memcached(下载地址:memcached-win64下载地址) 2.安装到windows服务,打开cmd命令行,进入memcached目录 ...

  7. fb登陆遇到傻逼问题

    centos中curl需要ssl的支持, 所以我重新安装了curl,并安装了openssl-devel,这个是依赖,必须的. so 完美

  8. Exception in thread "main" java.nio.channels.NotYetConnectedException

    import java.nio.channels.AsynchronousServerSocketChannel; import java.nio.channels.AsynchronousSocke ...

  9. BZOJ P1212 [HNOI2004] L语言

    标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的集合. 我 ...

  10. BaseActivity

    package com.glandroid.smssender; import android.content.DialogInterface; import android.content.pm.P ...