找回密码
当前位置：前端开发者 > CSS > 正文

前端开发效果实例_CSS小三角

2018-07-19 分类：CSS 阅读(824) 评论(0)

安卓数据前端开发|前端开发如何进阶|后端开发要了解前端多少

先看看如何写出各种小三角！/箭头向上/

.arrow-up {
width:0;
height:0;
border-left:30pxsolidtransparent;
border-right:30pxsolidtransparent;
border-bottom:30pxsolid#000;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:30pxsolidtransparent;
border-right:30pxsolidtransparent;
border-top:30pxsolid#000;
}
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30pxsolidtransparent;
border-bottom:30pxsolidtransparent;
border-right:30pxsolid#000;
}
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:30pxsolidtransparent;
border-bottom:30pxsolidtransparent;
border-left:30pxsolid#000;
}
/*:after 伪元素在元素之后添加内容实现小三角*/
.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:20pxsolidtransparent;
border-bottom:20pxsolidtransparent;
border-left:20pxsolid#838383;
}[/code]

代码片段 1

<!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>

前端开发小工具|前端开发调试工具|前端开发所需工具

赞(0)
前端开发者 » 前端开发效果实例_CSS小三角
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论