html 下拉框 小三角,CSS实现带小三角的消息提示框效果.html

.btn_exc button {

border: 1px solid #333333;

font-family: PingFang-SC-Regular;

font-size: 14px;

color: #333333;

height: 30px;

text-align: center;

border-radius: 6px;

background: #FFF;

}

.btn_exc .tips:after {

position: absolute;

display: inline-block;

top: -7px;

left: 40px;

width: 0;

height: 0px;

content: '';

border-style: solid;

border-width: 7px;

border-color: #fff;

transform: rotate(-45deg);

box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.10);

}

.btn_exc .tips {

display: none;

position: absolute;

z-index: 100;

width: 600px;

left: 5px;

transform: translateY(5px);

-webkit-transform: translateY(5px);

text-align: justify;

background: #ffffff;

border-radius: 6px;

padding: 0px 15px 15px 15px;

color: #666666;

font-family: PingFang-SC-Regular;

font-size: 14px;

box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.10);

margin-top: 10px;

}

.btn_exc .tips .one {

height: 15px;

width: 50px;

left: 30px;

background: #ffffff;

position: absolute;

z-index: 111;

}

点我弹窗

带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果

function open_tips() {

document.getElementById('tips').style.display = 'block';

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史