html+css对话框_html对话框代码用 css-CSDN博客

本文链接：https://blog.csdn.net/qq_43172476/article/details/112863419

html+css 对话框效果

完整代码
效果图

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对话框</title>
    <style>
        .ladder{
            border-bottom: 30px solid #ECD9BC;
            border-right: 30px solid transparent;
            width:30px;
            height:30px;
            margin-left: 265px;
            margin-top: 40px;
            display: inline-block;
            position: absolute;
            /*倾斜盒子 */
            transform: skewY(15deg);
            z-index: 999;
        }
        .talkDiv_one{
             /*不透明  透明为0*/
            opacity: 1;
            /* display:none; */
            /*margin: -20px -180px;*/
            z-index: 998;
            word-break:break-all;
            word-wrap:break-word; 
            font-size: 20px!important;
            padding: 5px 10px;
            border: 1px solid rgba(224, 186, 140, 0.62);
            border-radius: 10px;
            background-color: rgba(236, 217, 188);
            /*text-overflow: ellipsis;*/
            /*overflow: hidden;*/
            position: absolute;
        }
        .ladder_two{
            border-bottom: 30px solid #ECD9BC;
            border-left: 30px solid transparent;
            width:30px;
            height:30px;
            margin-left: 265px;
            margin-top: 140px;
            display: inline-block;
            position: absolute;
            /*倾斜盒子 */
            transform: skewY(-15deg);
            z-index: 999;
        }
        .talkDiv_two{
             /*不透明  透明为0*/
            opacity: 1;
            /* display:none; */
            margin-top: 140px;
            margin-left: 295px;
            z-index: 998;
            /* 自动换行---- */
            word-break:break-all;
            word-wrap:break-word; 
            /* 自动换行---- */
            font-size: 20px!important;
            padding: 5px 5px 5px 32px;
            border: 1px solid rgba(224, 186, 140, 0.62);
            border-radius: 10px;
            background-color: rgba(236, 217, 188);
            /*text-overflow: ellipsis;*/
            /*overflow: hidden;*/
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="talkDiv_one" style="width:272.667px;max-width:400px;min-height:100px;max-height:180px;overflow-y:auto;">
     谁是谁的谁的谁，谁让谁憔悴。那一夜，你没有拒绝我，那一夜，我伤害了你。
    </div>
    <span class="ladder"></span>
    <div class="talkDiv_two" style="width:272.667px;max-width:400px;min-height:100px;max-height:180px;overflow-y:auto;">
     谁是谁的谁的谁，谁让谁憔悴。那一夜，你没有拒绝我，那一夜，我伤害了你。
    </div>
    <span class="ladder_two"></span>
    
</body>
</html>