border-color显示梯形、等腰三角形、直角三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 梯形CSS */
.demo {
width: 100px;
height: 100px;
border: 100px solid;
border-color: red green yellow blue;
}
/* 等腰三角形CSS */
.demo01 {
width: 0;
height: 0;
border: 100px solid;
border-color: transparent red transparent transparent;
}
/* 直角三角形CSS */
.demo02 {
width: 0;
height: 0;
border: 100px solid;
border-color: transparent transparent red red;
}
</style>
</head>
<body>
<p>梯形</p>
<div class="demo"></div>
<p>等腰三角形</p>
<div class="demo01"></div>
<p>直角三角形</p>
<div class="demo02"></div>
</body>
</html>
注：显示成梯形需要设置宽高，显示为三角形设置宽高为0。（通过改变border里面的像素值可以改变图形大小）
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
