苏飞论坛

标题: css-绘制消息提示框 [打印本页]

---

作者: xyc    时间: 2021-7-5 15:03
标题: css-绘制消息提示框
     咱们继续之前说的css实现图形的效果方法，今天来说说消息提示框的实现方法。
     原理：一个圆角矩形加左边中间的一个小三角形。
     效果：
      (, 下载次数: 8)

上传

点击文件名下载附件
     HTML：
     

[HTML] 纯文本查看 复制代码

<div class="div"></div>

     css样式：
     

[CSS] 纯文本查看 复制代码

.div {

 width: 140px;

 height: 100px;

 margin: 30px 20px;

 float: left;

 background: #8867b9;

 position: relative;

 -moz-border-radius: 12px;

 -webkit-border-radius: 12px;

 border-radius: 12px;

}

.div:before {

 content: "";

 width: 0;

 height: 0;

 right: 100%;

 top: 38px;

 position: absolute;

 border-top: 13px solid transparent;

 border-right: 26px solid #8867b9;

 border-bottom: 13px solid transparent;

}  

    以上就是消息提示框的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

---

作者: 范范    时间: 2021-7-5 15:34
支持支持

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4