优化好看弹窗效果图，三角弹框

作者：Jasmine - 2015年03月17日

此效果制作起来并不难，纯css+div制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.fd_media_expand { width: 300px; height: 140px; background-color: #fafafa; border-color: #d9d9d9; border-style: solid; border-width: 1px; border-radius: 3px; padding: 10px 20px; margin-top: 10px; }
.fd_media_expand .fd_arrow { width: 22px; cursor: default; position: absolute; z-index: 0; margin: -18px 0 0 50px; }
.fd_media_expand .fd_arrow * { display: block; height: 12px; line-height: 1.231; font-family: "SimSun"; font-size: 12px; font-style: normal; overflow: hidden; }
.fd_media_expand .fd_arrow span { margin: -11px 0 0; }
.S_line1_c { color: #d9d9d9; }
.S_bg4_c { color: #fafafa; }
</style>
</head>

<body>
<div class="fd_media_expand">
  <div class="fd_arrow"><em class="S_line1_c">◆</em><span class="S_bg4_c">◆</span></div>
  <div class="content">
    <p>kshnddddddddddopskmffffffffffffffnask</p>
    <p>kshnddddddddddopskmffffffffffffffnask</p>
    <p>kshnddddddddddopskmffffffffffffffnask</p>
  </div>
</div>
</body>
</html>

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/134

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！