字符圓角尖角實現對話框

時間 2020-08-18

標籤字符圓角尖角實現對話框简体版

原文原文鏈接

儘管如今不少瀏覽器都支持圓角border-radius這個屬性了。css

之前作圓角還沒那麼簡單的時候，能用其餘方法模擬出圓角，可是不盡完美就是了。html

之前在看對話框的時候就疑惑，對話框旁邊的小尖角是怎麼作的。瀏覽器

看到一篇博客用字符作出來，感受又get到了技能。ui

用字符作圓角的話，仍是略顯粗糙，在瀏覽器放大到150的時候就顯現出來了。google

可是尖角的話用做對話的指向確實不錯，瀏覽器兼容也能夠。spa

第二個對話框要實現字符邊框效果，關鍵在於多作一個覆蓋層，經過定位的差距遮擋住前一個圓角的絕大部分，只露出圓弧部分實現。3d

點擊看效果demohtm

<!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">
    <link rel="styleSheet" href="./demo.css">
    <title>Document</title>
    <style>
        .ml20{
            margin: 0 auto;
            display: inline-block;
        }
        .sharp_square{
            width: 333px;
            height: 110px;
            background: #a0b3d6;
            position: relative;
            color: #a0b3d6;
        }
        .sharp_top_corner{
            line-height: 1;
            position: absolute;
            font-size: 34px;
            top: 32px;
            /* right: 80px; */
            left: -17px;
        }
        .sharp_square .quarter_round {
            position: absolute;
        }
        .quarter_round{
            display:inline-block; 
            width:8px; 
            height:8px; 
            overflow:hidden; 
            font-family:'宋體';
        }
        .quarter_round span{
            display:inline-block; 
            font-size:16px; 
            line-height:1;
        }
        .sharp_square .round_lt {
            left: -1px;
            top: -1px;
        }
        .sharp_square .round_rt {
            right: -1px;
            top: -1px;
        }
        .sharp_square .round_lb {
            left: -1px;
            bottom: 0px;
        }
        .sharp_square .round_rb {
            right: -1px;
            bottom: 0px;
        }
        .content_square{
            color: #fff;
            padding: 20px;
            font-size: 14px;
        }
        .sharp_square .quarter_round span {
            background: white;
        }
        .quarter_round .lt{}
        .quarter_round .rt{margin-left:-7px;}
        .quarter_round .lb{
            position: absolute;
            left: 0px;
            top: -6px;
        }
        .quarter_round .rb{
            position: absolute;
            /* left: 0px; */
            top: -5px;
            right: -1px;
        }
        .square_out_border {
            width: 472px;
            border: 1px solid #dadada;
            background: #f8f8f8;
            position: relative;
            color: #dadada;
        }
        .square_inner_border {
            border: 1px solid #ffffff;
            padding: 20px;
            font-size: 14px;
            color: #333333;
        }
        .square_top_corner{
            line-height: 1;
            height: 15px;
            font-size: 30px;
            position: absolute;
            top: -15.99px;
            right: 80px;
        }
        .square_top_corner2 {
            line-height: 1;
            font-size: 30px;
            color: #f8f8f8;
            position: absolute;
            top: 2px;
            right: 0;
        }
        .square_out_border .round_lt {
            left: -3px;
            top: -3px;
        }
       
        .square_out_border .quarter_round {
            position: absolute;
            z-index: 1;
        }
       
        .quarter_round {
            display: inline-block;
            width: 8px;
            height: 8px;
            overflow: hidden;
            font-family: '宋體';
        }
        .square_out_border .quarter_round span {
            background: #f8f8f8;
        }
        
        .quarter_round .lt {
        }
         
        .quarter_round span {
            display: inline-block;
            font-size: 16px;
            line-height: 1;
        }
        .square_out_border .round_lb {
            left: -3px;
            bottom: -1px;
        }
        .square_out_border .round_rb {
            right: -2px;
            bottom: -1px;
        }
        .square_out_border .round_rt {
            right: -2px;
            top: -4px;
        }
        .square_out_border .round_lt2 {
            left: -2px;
            top: -2px;
        }
         
        .square_out_border .quarter_round2 {
            color: #f8f8f8;
            z-index: 2;
        }
        .square_out_border .round_rt2 {
            right: -1px;
            top: -3px;
        }
         
        .square_out_border .quarter_round2 {
            color: #f8f8f8;
            z-index: 2;
        }
        .square_out_border .round_lb2 {
            left: -2px;
            bottom: 0px;
        }
        
        .square_out_border .quarter_round2 {
            color: #f8f8f8;
            z-index: 2;
        }
        .square_out_border .round_rb2 {
            right: -1px;
            bottom: 0px;
        }
        
        .square_out_border .quarter_round2 {
            color: #f8f8f8;
            z-index: 2;
        }
        .square_out_border .quarter_round2 span {
            background: none;
        }
        .method4{
            float: left;
        }
        .con1{
            float: left;
        }
        .method3{
            margin: 0 auto;
        }
        .method3 .zxx_ul_image{
            display: inline-block;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="demo-container">
            <div class="header">
                    <i>
                        <b>字符圓角和尖角實現對話框</b>
                    </i>
                </div>
        <div class="method-title">
            對話框
        </div>
        <div class="method-container">
            <div class="method4">
                <ul class="zxx_ul_image">
                    <li>
                        <img src=".././images/monkey.jpg" />
                    </li>                    
                </ul>
            </div>
            <div class="ml20 con1">
                <div class="sharp_square mt20">
                    <span class="sharp_top_corner">◄</span>
                    <span class="quarter_round round_lt"><span class="lt">●</span></span>
                    <span class="quarter_round round_rt"><span class="rt">●</span></span>
                    <span class="quarter_round round_lb"><span class="lb">●</span></span>
                    <span class="quarter_round round_rb"><span class="rb">●</span></span>
                    <div class="content_square"><span>以四分之一實體圓填充四個角，添加尖角符，實現帶尖角的實色圓角矩形。</span></div>
                </div>
            </div>
            <br style="clear:both">
        </div>
        <div class="method-container">
            <div class="method3">
                <ul class="zxx_ul_image">
                    <li>
                        <img src=".././images/insect.jpg" />
                    </li>
                </ul>
            </div>
            <div class="ml20">
                <div class="square_out_border mt20">
                    <span class="square_top_corner">◆
                        <span class="square_top_corner2">◆</span>
                    </span>
                    <span class="quarter_round round_lt">
                        <span class="lt">●</span>
                    </span>
                    <span class="quarter_round round_rt">
                        <span class="rt">●</span>
                    </span>
                    <span class="quarter_round round_lb">
                        <span class="lb">●</span>
                    </span>
                    <span class="quarter_round round_rb">
                        <span class="rb">●</span>
                    </span>
                    <div class="square_inner_border">
                        以四分之一實體圓填充四個角，重複一次，1像素錯位。添加尖角符，2像素上下錯位，矩形雙層標籤，實現最終的雙邊框效果。
                    </div>
                    <span class="quarter_round quarter_round2 round_lt2">
                        <span class="lt">●</span>
                    </span>
                    <span class="quarter_round quarter_round2 round_rt2">
                        <span class="rt">●</span>
                    </span>
                    <span class="quarter_round quarter_round2 round_lb2">
                        <span class="lb">●</span>
                    </span>
                    <span class="quarter_round quarter_round2 round_rb2">
                        <span class="rb">●</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

　　google下效果圖:blog

ie11效果圖get

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。