tip样式

作者:可乐 发布时间:October 9, 2014 分类:前端 No Comments

腰子今天问的一个东西,随手记录下。就是一个简单的tip实现。

核心点就是tip的那个三角形的实现

<textarea name="rtext" class="run_code" id="runcode_682"><!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>

</head>
<body>

<style>
    div{ position: relative; width: 300px; margin-bottom: 50px;  border: 1px solid #CCC; padding: 10px; -webkit-box-shadow:2px 2px 5px #CCC; }
    div:before,div:after{ content: " "; position: absolute; right: 10px; top: -4px;  width: 6px; height: 6px; background-color: #CCC; -webkit-transform: rotate(45deg);  }
    div:after{ top: -3px; background-color: #FFF; }
</style>
<div>
    文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试
</div>

</body>
</html></textarea>
<input class="btn btn-primary" name="rbutton" type="button" onclick="runcode('runcode_682');" value="运行代码">

标签: none

评论已关闭