小三角不设置宽高-- 制作原理

最新推荐文章于 2021-03-21 00:02:06 发布

子君不语

最新推荐文章于 2021-03-21 00:02:06 发布

阅读量387

点赞数

分类专栏： css

css 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
/*css注释给一个盒子加上边框且有高度和宽度*/
.box_1{
width:50px;
height:50px;
border: 2px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*给当边框增大时*/
.box_2{
width:50px;
height:50px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*给当边框增大，没有宽度和高度时*/
.box_3{
width:0px;
height:0px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*给当边框增大，没有宽度和高度，且给边框上边、右边颜色为透明属性(transparent)，下边、左边颜色为red、#ADFF2F时*/
.box_4{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent red #ADFF2F;
}
/*给当边框增大，没有宽度和高度，且给边框左边颜色为透明属性(transparent)，上边颜色为blue时*/
.box_5{
width:0px;
height:0px;
border-top: 20px solid blue;
border-left: 20px solid transparent;
/*border-right: 20px solid transparent;*/
margin-top:20px;
}
/*给当边框增大，没有宽度和高度，且给边框上边、右边、下边颜色为透明属性(transparent)，左边颜色为#ADFF2F时*/
.right{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent transparent #ADFF2F;
}
/*给当边框增大，没有宽度和高度，且给边框上边、右边、左边颜色为透明属性(transparent)，下边颜色为red时*/
.top{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent red transparent;
}
/*给当边框增大，没有宽度和高度，且给边框右边、下边、左边颜色为透明属性(transparent)，上边颜色为red时*/
.bottom{
width:0px;
height:0px;
border: 20px solid;
border-color: red transparent transparent transparent;
margin-top:20px;
}
/*给当边框增大，没有宽度和高度，且给边框上边、下边、左边颜色为透明属性(transparent)，右边颜色为red时*/
.left{
width:0px;
height:0px;
border: 20px solid;
border-color:transparent red transparent transparent;
}

</style>
</head>
<body>
css注释给一个盒子加上边框且有高度和宽度
<div class="box_1"></div>
给当边框增大时
<div class="box_2"></div>
给当边框增大，没有宽度和高度时
<div class="box_3"></div>
给当边框增大，没有宽度和高度，且给边框上边、右边颜色为透明属性(transparent)，下边、左边颜色为red、#ADFF2F时
<div class="box_4"></div>
给当边框增大，没有宽度和高度，且给边框左边颜色为透明属性(transparent)，上边颜色为blue时
<div class="box_5"></div>
给当边框增大，没有宽度和高度，且给边框上边、下边、左边颜色为透明属性(transparent)，右边颜色为red时
<div class="left"></div>
给当边框增大，没有宽度和高度，且给边框上边、右边、下边颜色为透明属性(transparent)，左边颜色为#ADFF2F时
<div class="right"></div>
给当边框增大，没有宽度和高度，且给边框上边、右边、左边颜色为透明属性(transparent)，下边颜色为red时
<div class="top"></div>
给当边框增大，没有宽度和高度，且给边框右边、下边、左边颜色为透明属性(transparent)，上边颜色为red时
<div class="bottom"></div>
</body>

</html>

转载自：http://www.w3cfuns.com/article-5602544-1-1.html

子君不语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
小三角不设置宽高-- 制作原理

Document/*css注释给一个盒子加上边框且有高度和宽度*/.box_1{width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }/*给当边框增大时*/.box_2{width:50px; height:50
复制链接

扫一扫

专栏目录