给盒子添加上一个小三角
1.先画一个大盒子box1，再在大盒子中画一个小盒子box2
2.将box1设置相关的样式
3.使box2的宽高都为零，设置边框的粗细以及相关的样式，从而使得每边原本为梯形的边框变为三角形
4.根据所需要的三角形的形状，把另外的三边设置为透明色
5.再把这个三角形移动到相应的位置就可以了
选择器 {
width：0；
height：0；
line-height：0；
font-size：0；
border：50px solid transparent;
border-left-color: yellow;}
<style>
div {
position: relative;
width: 200px;
height: 300px;
margin-top: 50px;
background-color: teal;
}
span {
position: absolute;
left: 200px;
top: 20px;
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
border: 20px solid transparent ;
border-left-color: teal;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
css三角化
在黄色的盒子里面做一个这样粉色的三角形
1.先画一个大盒子box1，再在大盒子中画一个小盒子box2
2.将box1设置相关的样式
3.使box2的宽高都为零，设置边框的粗细以及相关的样式，从而使得每边原本为梯形的边框变为三角形
4.只保留box2右边边框有颜色，上边框要稍大一点，右边框稍小一点，其余边框为0
5.移动到相应的地方
选择器 {
width : 0;
height: 0;
border-color: transparent pink transparent transparent;
border-style: solid;
border-width: 100px 50px 0px 0px;}
<style>
.box2 {
float: right;
width: 0px;
height: 0px;
border-color: transparent pink transparent transparent;
border-style: solid;
border-width: 100px 50px 0px 0px;
}
.box1 {
width: 150px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
