马三荷

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>

 

 结果：

当我们把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>

 结果：

这是我们在把左右下三个边的颜色设置为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>

 

结果：

带边框的三角形

要实现带边框的三角形，我们知道刚才实现的三角形本来就是通过三角形实现的，不可能在设置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>

结果

 

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

 

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

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

posted on 2018-01-26 11:02  马三荷  阅读(326)  评论(0)  编辑  收藏  举报

导航