CSS 如何绘制三角形
<style>
.triangle {
width: 0;
border-top: 50px solid red; /* 上三角形 */
border-right: 50px solid yellow; /* 右三角形 */
border-bottom: 50px solid palevioletred; /* 下三角形 */
border-left: 50px solid blue; /* 左三角形 */
}
</style>
<body>
<div class="triangle"></div>
</body>
https://codepen.io/JingW/pen/MWqPqBR
把其中的三个边框色，设置为transparent，就可以得到三角形了。效果和代码如下：
<style>
.triangle {
width: 0;
border: 50px solid transparent; /* 边框颜色为透明 */
border-left-color: 50px solid blue; /* 左三角形 */
}
</style>
<body>
<div class="triangle"></div>
</body>
css 如何画一个梯形
方法一：1 个长方形和 2 个三角形组合而成
https://codepen.io/JingW/pen/QWVZVVZ
方法二：利用 border 边框来绘制
当我们给盒子加上宽度后，再分别给不同边框加上不同大小和颜色，就可以得到如下图形。
<style>
.trapezoid {
width: 100px;
border-top: 50px solid red;
border-right: 50px solid skyblue;
border-left: 50px solid yellow;
border-bottom: 50px solid pink;
}
</style>
<body>
<div class="trapezoid"></div>
</body>
我们只需要把底边框颜色留下，其它三个边框颜色改为透明，就可以看到一个梯形了
<style>
.trapezoid {
width: 100px;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid pink; /*底边框代表梯形的高度，我们把他加高到100px*/
}
</style>
<body>
<div class="trapezoid"></div>
</body>
Comments NOTHING