Sphinm/MyBlog

纯css实现三角形

Sphinm opened this issue · 0 comments

Sphinm commented

今天读大漠老师的图解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头疼之后一点小乐趣吧，鼓励一下，继续加油！