CSS画三角形、圆形、椭圆形总结

html-css014

CSS画三角形、圆形、椭圆形总结,第1张

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

一、三角形

1、CSS画等腰三角形

2、画直角三角形:

二、画圆形

注意:border-radius是width/height的一半(50%)。

画半圆:

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

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

三、画椭圆

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

四、平行四边形

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

五、梯形

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

六、五边形、六边形

当div宽度为0,高度为0的时候,只设置border的大小和四边不同颜色可看到下图,只保留一边的颜色,另外三边的颜色设置为transparent可得到一个方向的三角形。因此,可延伸出设置一边的border的颜色,相邻两边的border设置为transparent可得到一个方向的三角形。

border的大小的值为三角形底边上的高,三角形的底为相邻两边的border的高的和,如下图所示的红色锐角三角形

若想实现直角三角形的效果,如下图所示直角在左上的三角形,按原理可设置上border和左border的颜色,另外两条边的颜色为transparent,此样式可简写为只设置上border的颜色,另一条相邻的右border为transparent

你也许会遇到要画个奇怪三角形的时候,只要参考锐角三角形的方式,找到三角形底边和高,计算出三角形高和把相邻两条边的高相加作为底部,你可以画出各种各样的三角形,如果再加上角度旋转的css,你便啥三角形都能画!

此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加,比如做如上图所示的边框为1px的红色边框白色底三角形,就先画一个红色三角形,再画一个尺寸少2px的白色底三角形,然后设置两个三角形的position将三角形重叠,这里使用伪元素实现

1、向上正箭头

2、向下正箭头

3、向左正箭头

4、向右正箭头

5、向左上箭头

6、向右上箭头

7、向左下箭头

8、向右下箭头

请把以下代码保存到记事本,另存为  "任意名字.html“打开后进行修改调试。希望可以帮到你。

<!DOCTYPE>

<html>

<head>

   <title>请填写标题</title>

   <meta http-equiv="Content-Type" content="text/html charset=utf-8" />

   <style type="text/css">

   *{margin:0padding:0}

   #content-left{

   height:100%   

   float:left

   background:#555555

   }

   #content-right{   

   height:100%

   float:right

   background:#666666

   }

   </style>

</head>

<body>

   <div id="content">

<div id="content-left">Hello</div>

<div id="content-right">你好</div>

<div style="clear:both"></div>

   </div>

   <script type="text/javascript">

//自定义:

var z= 15 //留出的空白边大小,填写数字(单位是像素),无边框请填写0

var c= "#222299" //边框颜色值

var cleft= "#777788" //左边块颜色值,本代码覆盖了css代码颜色值,如需使用css代码的颜色值,请把本行去掉

var cright= "#999966" //右边块颜色值,本代码覆盖了css代码颜色值,如需使用css代码的颜色值,请把本行去掉

//以下js代码调用以上自定义参数

var k= (document.body.clientWidth-(z*3))/2

var g= document.body.clientHeight-(z*2)

document.getElementById("content").style.padding= z +"px"

document.getElementById("content").style.height= g + "px"

document.getElementById("content").style.backgroundColor= c

document.getElementById("content-left").style.backgroundColor= cleft

document.getElementById("content-right").style.backgroundColor= cright

document.getElementById("content-left").style.width= k + "px" 

document.getElementById("content-right").style.width= k + "px"

//本段SCRIPT代码放在body结束标签之前

</script>

</body>

</html>