css画出各种不规则图形

html-css09

css画出各种不规则图形,第1张

1、圆形

#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}

2、椭圆

#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}

3、等边三角

#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}

4、五角星

#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}

5、爱心

#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-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%}

6、倒三角

#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }

CSS画正方形长方形很简单，本文就不说了。

一、三角形

1、CSS画等腰三角形

2、画直角三角形：

二、画圆形

注意：border-radius是width/height的一半（50%）。

画半圆：

半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。

画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。

三、画椭圆

斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。

四、平行四边形

margin-left是为了使得平行四边形可以全部在浏览器中显示出来

五、梯形

高度为0。有宽度没高度。

六、五边形、六边形

如果想要使用CSS绘制胡子样式，这要怎么画？下面本篇文章就来给大家介绍一下使用CSS绘制胡子效果的方法，希望对大家有所帮助。

绘制胡子的步骤：

步骤1： 创建一个黑色圆，圆角半径为50％，宽度和高度为180px

为了保持圆在中间，在左边加350px；为了要使圆可见，可添加背景色作为当前颜色。使用CurrentColor值的好处是更改颜色徽标，以便自动更改背景。

效果图：

步骤2： 使用box-shadow添加框阴影，使页面中间有两个圆

css样式

效果图：

步骤3： 使用::before元素添加左胡须

●　将::before元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使左胡须末端准确到达，然后以-40度角旋转。

添加.mustache::before样式

效果图：

步骤4： 使用::after元素添加右胡须

●　将::after元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使右胡须末端准确到达，然后以40度角旋转。

添加.mustache::after样式

效果图：

更多 web开发 知识，请查阅 HTML中文网 ！！