CSS实现三角提示框

1、无边框的

html:

<div class="main">
		<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
	</div>
	<div class="main2">
		<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
	</div>

css:

<style>
    	*{
    		margin: 0;
    		padding: 0;
    	} 	
    	.main,.main2{
    		width: 120px;
    		display: inline-block;
    		font-size: 14px;
    		color: #333;
    		line-height: 28px;
    		background: #F0981C;
    		position: relative;
    		padding: 10px;
    		-webkit-border-radius:5px;
    		-moz-border-radius:5px;
    		border-radius: 5px;
    	}
    	/*左三角*/
    	.main:before{
    		content: ' ';
    		border-top: 8px solid transparent;
    		border-bottom: 8px solid transparent;
    		border-right: 12px solid #F0981C;
    		position: absolute;
    		top: 15px;
    		left: -12px;
    	}
    	/*右三角*/
    	.main:after{
    		content: ' ';
    		border-top: 8px solid transparent;
    		border-bottom: 8px solid transparent;
    		border-left: 12px solid #F0981C;
    		position: absolute;
    		bottom: 15px;
    		right: -12px;
    	}
    	/*上三角*/
    	.main2:before{
    		content: ' ';
    		border-bottom: 8px solid #F0981C;
    		border-left: 8px solid transparent;
    		border-right: 12px solid transparent;
    		position: absolute;
    		top: -8px;
    		left: 20px;
    	}
    	/*下三角*/
    	.main2:after{
    		content: ' ';
    		border-top: 8px solid #F0981C;
    		border-left: 12px solid transparent;
    		border-right: 12px solid transparent;
    		position: absolute;
    		bottom: -8px;
    		right: 20px;
    	}
    </style>

效果如下：

2、有边框的

html:

<div class="main">
		<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
	</div>
	<div class="main2">
		<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
	</div>
	<div class="main3">
		<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
	</div>
	<div class="main4">
		<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
	</div>

css:

<style>
    	*{
    		margin: 0;
    		padding: 0;
    	} 	
    	div{
    		margin: 20px;
    	}
    	.main,.main2,.main3,.main4{
    		width: 120px;
    		padding: 10px;
    		font-size: 14px;
    		color: #333;
    		line-height: 28px;
    		background: #F0981C;
    		border: 2px solid #FF0000;
    		position: relative;
    		-webkit-border-radius:5px;
    		-moz-border-radius:5px;
    		border-radius: 5px;
    		display: inline-block;
    	}
    	/*左三角*/
    	.main:before,.main:after{
    		content: ' ';
    		border-top: 8px solid transparent;
    		border-bottom: 8px solid transparent;
    		border-right: 12px solid #FF0000;
    		position: absolute;
    		top: 15px;
    		left: -12px;
    	}
    	.main:after{
    		border-right: 12px solid #F0981C;
    		left: -8px;
    	}
    	/*右三角*/
    	.main2:before,.main2:after{
    		content: ' ';
    		border-top: 8px solid transparent;
    		border-bottom: 8px solid transparent;
    		border-left: 12px solid #FF0000;
    		position: absolute;
    		top: 15px;
    		right: -12px;
    	}
    	.main2:after{
    		border-left: 12px solid #F0981C;
    		right: -8px;
    	}
    	/*上三角*/
    	.main3:before,.main3:after{
    		content: ' ';
    		border-bottom: 12px solid #FF0000;
    		border-left: 12px solid transparent;
    		border-right: 12px solid transparent;
    		position: absolute;
    		top: -12px;
    		left: 20px;
    	}
    	.main3:after{
    		border-bottom: 12px solid #F0981C;
    		top: -9px;
    	}
    	/*下三角*/
    	.main4:before,.main4:after{
    		content: ' ';
    		border-top: 12px solid #FF0000;
    		border-left: 12px solid transparent;
    		border-right: 12px solid transparent;
    		position: absolute;
    		bottom: -12px;
    		right: 20px;
    	}
    	.main4:after{
    		border-top: 12px solid #F0981C;
    		bottom: -9px;
    	}
    </style>

效果如下：