css after before制作的边三角提示框

时间：2016-10-12

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>css after before制作的边三角提示框</title>
    <style type="text/css">
		.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%;
		}
    </style>
</head>
<body>
<div class="arrow_box"></div>
</body>
</html>

效果图：

左三角提示框：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>css after before制作的边三角提示框</title>
    <style type="text/css">
		.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::before{
			position:absolute;
			content:"";
			height:0;
			width: 0;
			pointer-events: none;
			border: solid transparent;
			border-color: rgba(136, 183, 213, 0);
			border-right-color: #88b7d5;
			border-width: 10px;
			top: 50%;
			right: 100%;
			margin-top:-10px;
		}
    </style>
</head>
<body>
<div class="arrow_box"></div>
</body>
</html>

效果图：

css after before制作的边三角提示框

同样，利用上面的实例也可以制作右三角提示框和下三角提示框。这里不再写实例了，读者可以自己尝试一下。

如果需要更多样式的边三角提示框，可以访问这个网站：http://cssarrowplease.com/

上一条：css margin-top属性不起作用的几个原因 下一条:纯css写的手风琴切换实例

css after before制作的边三角提示框

相关文章

最新文章