01.html 955 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. #top {
  8. position: absolute;
  9. width: 0px;
  10. height: 0px;
  11. line-height: 0px; /*为了防止ie下出现题型*/
  12. border-bottom: 10px solid #89b007;
  13. border-left: 10px solid #fff;
  14. border-right: 10px solid #fff;
  15. left: 76px;
  16. top: -10px;
  17. }
  18. #first {
  19. border-radius: 8px;
  20. position: absolute;
  21. height: 150px;
  22. width: 300px;
  23. background: #89b007;
  24. left: 22px;
  25. top: 33px;
  26. }
  27. #first p {
  28. padding: 10px;
  29. line-height: 1.5;
  30. color: #FFF;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="first">
  36. <p>带背景颜色的小三角实现是比较简单的!</p>
  37. <span id="top"></span>
  38. </div>
  39. </body>
  40. </html>