css实现三角形

我们很多时候都需要一些小图标小的icon什么，每次要img还得加载比较麻烦，用css就简单方便多了
实现三角形有两种思路，一种是border，一种是transform中的rotate

border

先认识盒模型
css实现三角形
margin
margin area用来分隔相邻的元素，上**意外边距融合，是透明空白区域，可以outline、box-shadow等等效果

border
顾名思义，就是围绕内边距和内容外的边框，可以控制border的相关样式，我们最合适的三角形靠它来实现的

padding
内容或者content的内边距，会受到背景、颜色或者图片的影响

content
内容区域，处于盒子模型的最里层也是最重要的一层，用来显示子元素和文本、图像这些内容的

在padding为0、width和height都为0时，padding area和content area都没有大小了，
此时设置border，且top、right、bottom、left设置不同颜色之后就会类似下图一样
css实现三角形
很明显，在浏览器中border各个方向就是这么划分各自*范围的

在实际项目中，当需要实心的三角形时我们可以只设置所需要方向的一边所需要颜色，相邻两边设置大小但设置背景色透明，不需要的一边就不要设置了，比方说设置一个向上的三角形

<style>
.example1{width:300px;padding-top:100px;height:200px;background-color:rgba(0,0,0,0.1)}
/* 下面才是三角形 */
.e1-angle{
	margin:0 auto;
	width:0;
	height:0;	/* 宽高0，content就没有内容了 */
	padding:0;	/* 可以不设，不设都是0，padding也没有了 */
	border-top:none;	/* 看那张图，可以不设，不设也是空 */
	border-left:50px solid transparent;	
	border-right:50px solid transparent;
	/* 左右两边设透明 */
	border-bottom:50px solid #000;	
}
</style>
<div class="example1">
	<div class="e1-angle"></div>
</div>

在chrome中选择dom元素查看的效果图如下
css实现三角形
如果组合写一个提示框可以这样写

border

相关推荐