css图形——三角形

1、css图形简介

在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现。但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质。

因为图片实现有两个很明显的缺点:一是图片大小比较大数据传输量大,二是一张图片会引发一次http请求。这两个方面都会影响页面加载速度,并且增加服务器负担

在实际开发中,对于下面图片效果我们更趋向于使用css实现方法

(1)三角形

(2)圆形于圆角

(3)椭圆形

css实现的图形效果更多用于展示,并不适用JavaScript动态操作,若果想要实现JavaScript动态操作,大家应该去了解canvas或SVG

一、三角形

在css盒子模型中,当一个盒子的两条边在边角处相交,浏览器会在交点处按照某个角度(如果盒子是正方形,则为顺时针45度、135度、225度、315度)绘制一条接合线。

例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形三角形</title>
<style type="text/css">
#box{
width: 30px;
height: 30px;
border-width: 20px;
border-style: solid;
border-color: yellow blue red green;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

结果:

css图形——三角形

当我们把width、height设置为0时

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形三角形</title>
<style type="text/css">
#box{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: yellow blue red green;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

结果:

css图形——三角形

这是我们在把左右下三个边的颜色设置为transparent(透明)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形三角形</title>
<style type="text/css">
#box{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: yellow transparent transparent transparent;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

结果:

css图形——三角形

带边框的三角形

要实现带边框的三角形,我们知道刚才实现的三角形本来就是通过三角形实现的,不可能在设置border,这时候我们就需要用两个三角形来实现,背景色通过内三角形实现,边框通过外三角形实现然后通过定位布局重叠在一起。

注意,两个三角形定位要相差一个像素,一般情况下,都是将内层三角形相对于外层三角形进行定位,偏移1像素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带边框的三角形</title>
<style type="text/css">
/*外三角形*/
#triangle{
position: relative;
width: 0;
height: 0;
border-width: 30PX;
border-style: solid;
border-color: transparent transparent black transparent;
}
/*内层三角形*/
#triangle div{
position: absolute;
top: 1px;
left: 0px;
width: 0;
height: 0;
border-width: 29px;/*注意内层三角形边高29px*/
border-style: solid;
border-color: transparent transparent #BBFFEE transparent; }
</style>
</head>
<body>
<div id="triangle">
<div></div>
</div>
</body>
</html>

结果

css图形——三角形

为什么跟预想的不一样呢?

css图形——三角形

这是因为子元素绝对定位是根据父元素的“内容边界”进行定位的,而不是根据我们耨眼搜看见的三角形边界来进行定位。又因为盒子的宽高皆为0,因此content实在盒子的中心。

这时把top:-28px;left:-29px;就可以了;

上一篇:纯Css绘制三角形箭头三种方法


下一篇:JAVA第一个窗体小程序