0
点赞
收藏
分享

微信扫一扫

设置css的border-color属性得到三角形或梯形

Brose 2021-09-30 阅读 55
HTML(下面的效果图实现HTML的代码均一样)
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 </head>
 <body>
 <div id="wrapper"></div>
 </body>
 </html>
1、CSS(中间有width,有height)
 #wrapper{
 width:100px;
 height:100px;
 border-width: 100px;
 border-style: solid;
 border-color: blue black red yellow;
}
效果图

2、CSS(中间有width,无height)
#wrapper{
width:100px;
height:0;
border-width: 100px;
border-style: solid;
border-color: blue black red yellow;
}
效果图

3、CSS(中间无width,有height)
#wrapper{
width:0;
height:100px;
border-width: 100px;
border-style: solid;
border-color: blue black red yellow;
}
效果图

4、CSS(中间无width,无height)
#wrapper{
width:0;
height:0;
border-width: 100px; 
border-style: solid;
border-color: blue black red yellow;
}
效果图


1、border-width:100px;设置元素边框上下左右宽度都是100px
2、border-color: blue black red yellow;设置元素四个边框的颜色
3、transparent : 颜色指定为透明的

5、CSS(中间无width,无height,三个边框颜色是transparent)
#wrapper{
width:0;
height:0px;
border-width: 100px;
border-style: solid;
border-color: transparent black   transparent transparent;
}
效果图

6、CSS(中间y有width,有height,三个边框颜色是transparent)
#wrapper{
width:100px;
height:100px;
border-width: 100px;
border-style: solid;
border-color:transparent transparent red transparent;
}
效果图

举报

相关推荐

css写三角形

css制作三角形

CSS画三角形

CSS绘制三角形

css画三角形

CSS三角形绘制

CSS实现三角形

0 条评论