简介

由于图片体积大，并且每张图片都要引发一次 http 请求的原因，在前端开发中，为了保证性能速度，会遵循少用图片的原则。本文将介绍几种特殊图形。

三角形

CSS 实现三角形原理

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            border-width: 30px;
            border-style: solid;
            border-color: red green blue orange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

已知颜色分配是顺时针来进行的（其他标签也是如此），所以将上述代码的第 13 行后三个颜色都改为 transport 之后，就能够得到一个指向下面的红色三角。其他搭配也是如此。

由此可知使用 CSS 来实现三角形的原理：将一个元素的 width 和 height 定义为 0，然后为它设置较粗的边框，并且将其中任意三条边框或者两条边框的颜色定义为 transparent。

带边框的三角形

对于这种带边框的三角形，我们一般使用两个三角形来实现。一个作为背景色（内层三角形），一个作为边框色（外层三角形），然后通过定位布局重叠在一起。注意，两个三角形定位要相差 1px。

一般情况下，都是用内层三角形相对于外层三角形进行定位，偏移 1px。在实现带边框的三角形原理中，有一个绝对定位的问题是一定不可忽视的：上、右、下、左 4 个方向的三角形相对于父元素的定位是不同的。必须把这个问题搞清楚，我们才能深刻理解带边框的三角形的实现原理。

<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*外层三角形*/
        #triangle {
            position: relative;
            /*设置position:relative，使子元素可以相对父元素进行定位*/
            width: 0;
            height: 0;
            border-width: 30px;
            /*注意外层三角形高为30px*/
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

        /*内层三角形*/
        #triangle div {
            position: absolute;
            top: 1px;
            left: 0;
            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>

![image.png](https://cdn.nlark.com/yuque/0/2022/png/12988254/1650107840487-7338638a-52c4-44b9-8a10-21ca9d64f75e.png#clientId=u8934eece-406f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=129&id=uc50a03f7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=129&originWidth=220&originalType=binary&ratio=1&rotation=0&showTitle=true&size=1022&status=done&style=none&taskId=u9524e2a3-2204-4ec7-b4a8-8d7671b5d3a&title=%E5%AE%9E%E7%8E%B0%E6%95%88%E6%9E%9C&width=220 "实现效果")<br />原因：子元素的绝对定位是根据父元素的“内容边界（content）”进行定位的。 也就是说，“内层三角形对应的盒子”的绝对定位是根据“外层三角形对应的盒子”的内容边界 （content）来进行的，而不是根据我们肉眼所看到的三角形的边界来进行的。由于盒子的 width 和 height 都是 0，因此 content 是在盒子的中心（也就是中心点）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #wrapper {
            display: inline-block;
            position: relative;
            padding: 20px 30px;
            margin-top: 100px;
            border: 1px solid gray;
            border-radius: 10px;
            /*添加圆角效果*/
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            background-color: #BBFFEE;
        }

        /*外层三角形*/
        #triangle {
            position: absolute;
            top: -30px;
            /*left:50%和margin-left:-15px是为了实现三角形的水平居中*/
            left: 50%;
            margin-left: -15px;
            width: 0;
            height: 0;
            border-width: 15px;
            border-style: solid;
            border-color: transparent transparent rgb(0, 0, 0) transparent;
        }

        /*内层三角形*/
        #triangle div {
            position: absolute;
            top: -13px;
            left: -14px;
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            border-color: transparent transparent #BBFFEE transparent;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="triangle">
            <div></div>
        </div>
        气泡效果
    </div>
</body>

</html>

一共需要进行两次定位：一次是将外层三角形和内层三角形作为一个整体相对于容器进行定位；另外一次是将内层三角形相对于外层三角形进行定位。

一般情况下，外层三角形 border-width 比内层三角形 border-width 大 1px。此外，内层三角形的 left 值一般都是其 border-width 的负数，top 值一般都是其 border-width 的负数加 1。

圆角与圆

border-radius 实现圆角

border-radius 属性取值是一个长度值，单位可以是 px、em 和百分比等。当然可以分开赋值，类似：border-top-right-radius ：代表右上角圆角。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div
      {
        width:200px;
        height:150px;
        border:1px solid gray;
        /* border-radius:20px; 
        元素的四个角圆角半径都是 20 px*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

 border-radius 属性跟 border、padding、margin 等属性相似，其属性值也有 4 种写法。

border-radius:10px;                                 四个角的圆角半径都是 10px。
border-radius:10px 20px;                         左上和右下的圆角半径为 10px，右上左下圆角半径 20px。
border-radius:10px 20px 30px;             表示左上角的圆角半径是 10px，左下角和右上角的圆角半径都是 20px，右下角的圆角半径是 30px。
border-radius:10px 20px 30px 40px;     表示左上角、右上角、右下角和左下角的圆角半径依次是 10px、20px、30px、40px。

这里按照顺时针来赋予属性，一个值的时候四个角都被设置，一个以上的时候，从左上角开始对本角和其对顶角赋值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div
      {
        width:50px;
        line-height:50px;
        border-radius:80% 90% 100% 20%;
        background-color:#E61588;
        font-size:30px;
        text-align:center;
        color:White;
      }
    </style>
  </head>
  <body>
    <div>6</div>
  </body>
</html>

border-radius 实现半圆和圆

半圆：把高度 height 设为宽度 width 的一半，并且把左上角和右上角的圆角半径定义为与元素的高度一致，而右下角和左下角的圆角半径要定义为 0。

div {
  height: 50px;
  width: 100px;
  border-radius: 50px 50px 0 0;
  background-color: antiquewhite;
        }

 圆：同半圆，长宽一致，圆角半径等于边长一半。

div {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: antiquewhite;
        }

椭圆

border-radius:x/y;

从图上可以看到，实现一个椭圆的方式：border-radius:宽一半/高一半; 或者 border-radius: 50%/50%;

div {
  height: 100px;
  width: 200px;
  border-radius: 50%/50%;
  /*border-radius: 100px/50px;*/
  background-color: antiquewhite;
        }

图标制作

与 CSS3 内容相关性较大，之后再完成相关内容。

🛠️Tech

CSS 图形

简介

三角形