绘制对话框

作者: 钢笔先生 | 来源:发表于2020-01-31 15:48 被阅读0次

绘制对话框
Flutter 踩坑记录
10.9学习总结
ps 如何绘制云朵状对话框？
QDialog模态对话框绘制透明PNG图片
跟我一起学QT_QT标准对话框_字体选择框
跟我一起学QT_QT标准对话框_颜色选择框
跟我一起学QT_QT标准对话框_文件对话框
12.2多重线性回归分析
浏览器组成

Time: 20200131

三角形的绘制

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三角形</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

CSS样式

.triangle {
    /* border: 50px solid #ccc; */
    border-top: 50px solid transparent;
    border-left: 50px solid #f00;
    border-bottom: 50px solid transparent;
    border-right: 0px solid #00f;

    width: 0px;
    height: 0px;
    margin: 50px auto;
}

对话框的绘制

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="dialog.css">
</head>
<body>
    <div class="dialog">
        Hello Everybody!
    </div>
</body>
</html>

CSS样式

.dialog {
    background-color: #6a6;
    width: 300px;
    height: 25px;
    margin: 50px auto;
    line-height: 25px;
    padding: 10px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    color:#fff;
    /* 相对定位 */
    position: relative; 
}

/* 加三角形 */
/* 使用伪元素 */
/* 向左的三角形，左边border为0，上下颜色为透明 */
.dialog::before {
    content: '';
    border-left: 0px solid #6a6;
    border-top: 10px solid transparent ;
    border-right: 10px solid #6a6;
    border-bottom: 10px solid transparent ;
    /* 绝对定位 */
    position: absolute;
    left: -10px;
    top: 14px;
}