字符圆角尖角实现对话框

最新推荐文章于 2021-05-27 01:21:04 发布

weixin_30567471

最新推荐文章于 2021-05-27 01:21:04 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/lemon-zhang/p/8005236.html

版权

尽管现在很多浏览器都支持圆角border-radius这个属性了。

以前做圆角还没那么简单的时候，能用其他方法模拟出圆角，但是不尽完美就是了。

以前在看对话框的时候就疑惑，对话框旁边的小尖角是怎么做的。

看到一篇博客用字符做出来，感觉又get到了技能。

用字符做圆角的话，还是略显粗糙，在浏览器放大到150的时候就显现出来了。

但是尖角的话用作对话的指向确实不错，浏览器兼容也可以。

第二个对话框要实现字符边框效果，关键在于多做一个覆盖层，通过定位的差距遮挡住前一个圆角的绝大部分，只露出圆弧部分实现。

点击看效果demo

<!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下效果图:

ie11效果图

转载于:https://www.cnblogs.com/lemon-zhang/p/8005236.html

weixin_30567471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字符圆角尖角实现对话框

尽管现在很多浏览器都支持圆角border-radius这个属性了。以前做圆角还没那么简单的时候，能用其他方法模拟出圆角，但是不尽完美就是了。以前在看对话框的时候就疑惑，对话框旁边的小尖角是怎么做的。看到一篇博客用字符做出来，感觉又get到了技能。用字符做圆角的话，还是略显粗糙，在浏览器放大到150的时候就显现出来了。但是尖角的话用作对话的指向确实不错，浏览器兼容也可以。第二...
复制链接

扫一扫