123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- #top {
- position: absolute;
- width: 0px;
- height: 0px;
- line-height: 0px; /*为了防止ie下出现题型*/
- border-bottom: 10px solid #89b007;
- border-left: 10px solid #fff;
- border-right: 10px solid #fff;
- left: 76px;
- top: -10px;
- }
- #first {
- border-radius: 8px;
- position: absolute;
- height: 150px;
- width: 300px;
- background: #89b007;
- left: 22px;
- top: 33px;
- }
- #first p {
- padding: 10px;
- line-height: 1.5;
- color: #FFF;
- }
- </style>
- </head>
- <body>
- <div id="first">
- <p>带背景颜色的小三角实现是比较简单的!</p>
- <span id="top"></span>
- </div>
- </body>
- </html>
|