cssborder

阿玲玲啊
阿玲玲啊 发布于 6 天前 浏览:122 类型:原创 - 随笔 分类:HTML/CSS - html/css 二维码: 作者原创 版权保护
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!{:1_523:}
先看看如何写出各种小三角!
<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{ margin-bottom:20px;}
               /*箭头向上*/
                .arrow-up {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-bottom:30px solid #000;
                }
                        
                 /*箭头向下*/
                .arrow-down {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-top:30px solid #000;
                }
                        
                 /*箭头向左*/
                .arrow-left {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom:30px solid transparent; 
                        border-right:30px solid #000; 
                }
                   
                /*箭头向右*/
                .arrow-right {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom: 30px solid transparent;
                        border-left: 30px solid #000;
                }
                
                .box{ width:300px; height:300px; background:#838383; position:relative;}
                .box:after{
                    position:absolute;
                        right:-20px;
                        top:10px;
                    display:block;
                        content:"";
                    width:0; 
                        height:0; 
                        border-top:20px solid transparent;
                        border-bottom: 20px solid transparent;
                        border-left: 20px solid #838383;
                }
                
        </style>
</head>
<body>
        
        <div class="arrow-up">
     <!--向上的三角-->
        </div>
        <div class="arrow-down">
                <!--向下的三角-->
        </div>
        <div class="arrow-left">
                <!--向左的三角-->
        </div>
        <div class="arrow-right">
                <!--向右的三角-->
        </div>
        
        <div class="box">
                 :after 伪元素在元素之后添加内容实现小三角
        </div>
        
        
</body>
</html>

2、七巧板
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS版本之七巧板</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -200px;
            width: 400px;
            height: 400px;
        }
        i {
            position: absolute;
            font: 0/0 "";
        }

        .l-t {
            left: 0;
            top: 0;
            border-color: #caff67 transparent transparent #67becf;
            border-width: 200px;
            border-style: solid dashed dashed solid;
        }
        .l-b {
            left: 0;
            bottom: 0;
            border-color: transparent #a594c0 #fa8ecc transparent;
            border-width: 100px;
            border-style: dashed solid solid dashed;
        }
        .r-t {
            right: 0;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: #ef3d61;
        }
        .r-t:before {
            position: absolute;
            top: -100px;
            content: "";
            border-color: transparent #ef3d61 #ef3d61 transparent;
            border-width: 50px;
            border-style: dashed solid solid dashed;
        }
        .r-t:after {
            position: absolute;
            left: -100px;
            content: "";
            border-color: transparent #f9f51a #f9f51a transparent;
            border-width: 50px;
            border-style: dashed solid solid dashed;
        }
        .r-b {
            right: 0;
            bottom: 0;
            border-color: #ef3d61 #fa8ecc #fa8ecc #a594c0;
            border-width: 100px;
            border-style: solid;
        }
        .r-b:before {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            border-color: #f9f51a #f9f51a transparent transparent;
            border-width: 50px;
            border-style: solid solid dashed dashed;
        }

    </style>
</head>
<body>
<div class="wrap">
    <i class="l-t"></i>
    <i class="r-t"></i>
    <i class="l-b"></i>
    <i class="r-b"></i>
</div>
</body>
</html>
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
阿玲玲啊 阿玲玲啊 作者

作者最新