1.画三角形干嘛？或者问它能干吗？
三角形在开发中经常用到，比如气泡，箭头，等一些标示指向的图形或者需求。
2.怎么🌹三角形？
很简单，利用边框属性：border。
1.第一步画一个矩形
- 画一个矩形，边框宽度设置为40px,
- 上下左右边框的颜色分别使用不同的颜色
-
矩形宽高都是40px,背景色红色。
初始样子
<div>
<div class="triangle"></div>
</div>
css:
.triangle{
width: 40px; /* 矩形宽度 */
height:40px; /* 矩形高度 */
background: red; /* 矩形背景颜色*/
border-width: 40px;/* 边框宽度 */
border-style: solid;/* 边框为实线 */
border-color: #3385ff #ffab00 #00ff00 #BF974D;/* 边框颜色 上 右 下 左*/
}
2.出现三角形
矩形宽高都设置为0
-
取消背景颜色
四个三角形已出现3.要哪一个三角形？
想保留哪一个三角形就把其他的三角形边框颜色设置为透明
-
border-color分别设置上右下左为非透明，其他边框为透明
.triangle{ width: 0px; height:0px; border-width: 40px;/* 边框宽度 */ border-style: solid;/* 边框为实线 */ border-color: #3385ff transparent transparent transparent; /*border-color: transparent #ffab00 transparent transparent;*/ /*border-color: transparent transparent #00ff00 transparent;*/ /*border-color: transparent transparent transparent #BF974D;*/ }
三角形
