利用CSS3画三角形（另附百度笔试题）

来源：互联网发布：mac下安装mysql 编辑：程序博客网时间：2024/05/22 06:25

一、原理

CSS3画三角形的原理十分简单，利用到的属性无非几种：width、height、content、border。

拿一个矩形举例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#pentagon {width: 0;height: 0;content: '';border: 50px solid red;}</style></head><body><div id='pentagon'></div></body></html>

显示效果：

问题来了：为什么我已经将矩形的宽高和内容都置空了，仍然会有矩形出现呢？

答案是：你所看到的矩形是由四个实心边框组合起来的。

不信你看下面：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#pentagon {width: 0;height: 0;content: '';border: 50px solid red;border-top: 50px solid transparent;}</style></head><body><div id='pentagon'></div></body></html>

显示效果：

我所做的修改是：加了顶部边框的样式，将顶部边框设置为透明。

看到这里，大家应该明白了吧，在矩形的宽高都是0的时候，矩形的实心边框都挤在了一起，在每两条边相接的部分二者等分，这样就造成了四个三角形组合为一个矩形的效果，自热而然，如果将其它三个三角形设置为透明色，那么剩下的一个就是被人眼所看见的三角形了。

二、百度笔试题

题目不用描述了，就是去让你用CSS去搞定这样一个图案。不多说，先上菜：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#ghostlpx{      width: 100px;      height: 100px;      border:2px solid #000;      position: relative;      margin-right: 10px;  }  #ghostlpx:before,#ghostlpx:after{      content: ' ';      position: absolute;      left: 100%;      border: solid transparent;    }  #ghostlpx:after{      width: 0px;      height: 0px;      top:20px;      border-width: 10px;      border-left: 10px solid  #fff;   }  #ghostlpx:before{      width: 0px;      height: 0px;      top:18px;      border-width: 12px;      border-left: 12px solid #000; }  </style></head><body><div id='ghostlpx'></div></body></html>

那个凸出来的三角框其实是用两个三角形叠加出来的，用before伪类去实现底部的黑色不透明三角形，用after伪类去实现before上部的透明三角形，利用after去遮盖before，未遮盖的部分即为你所看到的三角形边框。

三、利用三角形实现箭头

了解了三角形的实现原理，那么五角星、六边形...n边形你依然不会实现，自行百度去吧，一搜一大堆。我想给大家贴一个我项目里实现过的一个箭头形状，很简单，也很常用。代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    #pentagon {        position: relative;        width: 100px;        height: 4px;        margin: 10px 0;        background: rgb(204,204,204);}    #pentagon:after {        content: "";        position: absolute;        top: -8px;        left: 100px;        height: 0;        width: 0;        border-width: 10px;        border-style: solid;        border-color: transparent transparent transparent rgb(204,204,204);    }</style></head><body><div id='pentagon'></div></body></html>

效果图：

--END--

阅读全文

0 0