纯css实现三角形
2017-11-26 本文已影响12人
苏敏
今天读大漠老师的图解css3中，遇到一个需要画三角形的地方，我刚好学一下。
image.png
这里是我做的一些注释，我们来看一下，首先我们设置了一个白色的5px的border，通过设置宽高为0达到整个盒子只剩下border值，然后通过border-color来取到三角形，我们也可以通过调整颜色值的位置来达到不同方向上的
实体三角形。实现效果如下
image.png
到这里我们就可以获取到一个简单的三角形，但是如果我们想要一个没有内边线的三角形呢，如图示
image.png
是不是要动动脑筋呢，实现的思路其实还是上面那个，但是需要动一动你的脑袋，首先我们把问题分解，一步步的去实现这个过程才是收货。
- 我们可以先拿到一个矩形框
- 其次我们也可以通过设置边框的方式来拿到三角形，可是好像一个三角形拿不到我们想要的结果啊，怎么办呢？
- 一个实心三角形我会了，但是中间那部分怎么去掉呢？好像把三角形的黑色部分去掉不就可以了嘛，我可以再设置一个三角形来达到目的的
- 通过实心三角形的方法我能拿到大小两个三角形了，然后通过把小三角形的颜色设置为transparent就可以了
最终实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#demo {
width: 300px;
height: 150px;
background-color: #fff;
position: relative;
border: 4px solid #333;
}
#demo:after, #demo:before {
/*这里边框是为了方便看清楚演示*/
border: 5px solid #ccc;
content: '';
width: 0;
height: 0;
left: 100%;
position: absolute;
}
#demo:before {
border-width: 14px;
border-color: transparent transparent transparent #333 ;
top: 10px;
}
#demo:after {
border-width:9px;
border-color: transparent transparent transparent #fff ;
top:15px;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
ok，也算是复习css头疼之后一点小乐趣吧，鼓励一下，继续加油！
