好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

cssafterbefore制作的边三角提示框

上三角提示框(使用after伪类元素,当然也可以使用before伪类元素):

  
 
     css after before制作的边三角提示框 
     
		.arrow_box {
			position: relative;
			background: #88b7d5;
			border: 1px solid #c2e1f5;
			padding: 10px;
			width: 200px;
			height: 100px;
			border-radius: 6px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
			margin: 30px;
			float: left;
		}
		.arrow_box::after{
			position:absolute;
			content:"";
			height:0;
			width: 0;
			pointer-events: none;
			border: solid transparent;
			border-color: rgba(136, 183, 213, 0);
			border-bottom-color: #88b7d5;
			border-width: 10px;
			left: 50%;
			margin-left: -10px;
			bottom: 100%;
		}
     
 
 

查看更多关于cssafterbefore制作的边三角提示框的详细内容...

  阅读:36次